/* ============================================================
   screens.css — per-screen composition (About / Work / Experience / Hero).
   Tokens only; no new colors. Hairlines + the 4px grid throughout.
   ============================================================ */

/* ---- Shared screen scaffold ---- */
.screen { display: flex; flex-direction: column; gap: 48px; }

/* Visually hidden but present for crawlers / assistive tech (no layout impact) */
.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.screen__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: var(--border-1) solid var(--border-hairline);
}
.screen__head-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.screen__head-sep { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }

/* ---- About: header meta ---- */
.about__meta-item { display: inline-flex; gap: 8px; }

/* §6/§8 — RU · EN language toggle (About header); active = underlined link */
.lang-toggle {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.lang-btn {
  background: none;
  border: none;
  padding: 2px 1px;
  cursor: pointer;
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 2px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lang-btn:hover { color: var(--text-primary); }
.lang-btn.is-active { color: var(--link); border-bottom-color: var(--link); }
.lang-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.lang-toggle__sep { color: var(--text-tertiary); font-family: var(--font-mono); font-size: 12px; }

/* §6 — Certificates: compact mono datasheet rows under STACK */
.about__label--certs { margin-top: 16px; }
.certs { display: flex; flex-direction: column; }
.cert-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
}
.cert-row--divided { border-top: var(--border-1) solid var(--border-hairline); }
.cert-row__name {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
}
.cert-row__org {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  text-align: right;
}
.about__meta-k,
.about__meta-v {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.about__meta-k { color: var(--text-secondary); }
.about__meta-v { color: var(--text-secondary); }

/* ---- About: intro ---- */
.about__intro {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  border: var(--border-1) solid var(--border-hairline);
  padding: 32px 32px 40px;
  align-items: start;
}
.about__prose { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.about__prose .u-body { margin: 0; }
.about__principle {
  margin: 0;
  padding-bottom: 6px;
  font-size: 18px;
  color: var(--text-primary);
}
.about__portrait { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.about__portrait-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  filter: grayscale(1);
}

/* ---- About: expertise + stack ---- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  align-items: start;
}
.about__col { display: flex; flex-direction: column; gap: 24px; }
.about__label { color: var(--text-primary); }
.about__expertise {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* ============================================================
   WORK
   ============================================================ */
.work__count {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.work__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: -16px;
  border-bottom: var(--border-1) solid var(--border-hairline);
  padding-bottom: 2px;
}
.work__list { display: flex; flex-direction: column; gap: 24px; }

/* ---- Case card ---- */
@keyframes case-in {
  from { transform: translateY(12px); }
  to   { transform: none; }
}
.case-card {
  display: block;
  text-decoration: none;
  border: var(--border-1) solid var(--border-hairline);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
  animation: case-in 320ms var(--ease) both;
}
.case-card:hover { transform: translateY(-1px); border-color: var(--border-hairline-strong); text-decoration: none; }
.case-card:hover .vk-tick { border-color: currentColor; }

.case-card__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 2.6 / 1;
  overflow: hidden;
}
.case-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.case-card__scrim {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  pointer-events: none;
}
.case-card__top {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.case-card__nda {
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  text-transform: uppercase;
  border: var(--border-1) solid;
  padding: 5px 8px;
}
.case-card__overlay {
  position: absolute;
  left: 28px;
  right: 28px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.case-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.case-card__cats,
.case-card__year {
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.case-card__title {
  margin: 0;
  font: var(--weight-display) 28px / 1.15 var(--font-display);
  letter-spacing: -0.01em;
  max-width: 80%;
}
.case-card:hover .case-card__title { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.case-card__desc {
  margin: 0;
  font: var(--type-label);
  letter-spacing: 0.04em;
}
.case-card__arrow {
  position: absolute;
  right: 24px;
  bottom: 24px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--border-1) solid;
  background: rgba(0,0,0,0.0);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}
.case-card:hover .case-card__arrow { opacity: 1; transform: none; }

/* ============================================================
   EXPERIENCE
   ============================================================ */
.tldr {
  background: var(--bg-muted);
  border: var(--border-1) solid var(--border-hairline);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tldr__body { margin: 0; max-width: none; }

.exp-list { display: flex; flex-direction: column; gap: 16px; }

/* §4 — invite card (dashed = the one sanctioned exception, "open slot") */
.exp-invite {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border: 1px dashed var(--text-tertiary);
  background: var(--bg-muted);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
/* §2 (real fix) — the underline came from the DS global `a:hover {
   text-decoration: underline }`. `.exp-invite` IS that <a>, so the line is
   drawn by the anchor and propagates to every descendant — a child
   `text-decoration:none` can never cancel an ancestor's line. Kill it on the
   anchor itself (default + hover). */
.exp-invite, .exp-invite:hover { text-decoration: none; }
.exp-invite:hover { border-color: var(--link); background: var(--bg-surface); }
.exp-invite__glyph {
  width: 48px; height: 48px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--text-tertiary);
  font: var(--weight-display) 22px var(--font-display);
  color: var(--text-secondary);
}
.exp-invite:hover .exp-invite__glyph { border-color: var(--link); color: var(--link); }
.exp-invite__main { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.exp-invite__title { font: var(--weight-display) 20px / 1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); text-decoration: none; }
.exp-invite__sub { font: var(--type-body-sm); color: var(--text-secondary); text-decoration: none; }
.exp-invite__arrow { transition: transform var(--dur) var(--ease); }
.exp-invite:hover .exp-invite__arrow { transform: translateX(3px); }

.exp-row {
  border: var(--border-1) solid var(--border-hairline);
  background: var(--bg-surface);
  transition: border-color var(--dur) var(--ease);
}
.exp-row:hover { border-color: var(--border-hairline-strong); }
.exp-row--first { border-top: 2px solid var(--text-primary); }

.exp-row__head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 20px 22px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  appearance: none;
  transition: background-color var(--dur) var(--ease);
}
.exp-row__head:hover { background: var(--bg-muted); }
/* §28 — brand logos in Experience stay monochrome per the datasheet system */
.exp-row__head img { filter: grayscale(1); }
.exp-row__mark {
  width: 48px; height: 48px; flex: none;
  border: var(--border-1) solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  font: var(--type-label); color: var(--text-tertiary);
}
.exp-row__main { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.exp-row__title-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.exp-row__company { font: var(--weight-display) 24px / 1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
/* §3.5 — “→ ASI” reads as part of the company name: same Grotesk treatment,
   not a mono sub-element. Year range stays mono (.exp-row__period). */
.exp-row__marker { font: var(--weight-display) 24px / 1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); white-space: nowrap; }
.exp-row__period { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--link); }
.exp-row__role { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-secondary); }
.exp-row__summary { font: var(--type-body-sm); color: var(--text-tertiary); margin-top: 4px; }

.exp-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
.exp-row__panel[data-open="true"] { grid-template-rows: 1fr; }
.exp-row__panel-clip { overflow: hidden; }
.exp-row__panel-inner {
  padding: 0 20px 24px 84px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.exp-row__body { font: var(--type-body); color: var(--text-secondary); margin: 0; max-width: 620px; }
.exp-row__works { display: flex; flex-direction: column; gap: 12px; }
.exp-row__works-label { color: var(--text-tertiary); }
.exp-row__works-list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 24px;
}
/* §3.3 — Works items are labels (not links): one consistent mono treatment
   in secondary ink, matching the datasheet spec-value style. */
.exp-row__work { font-family: var(--font-mono); font-size: 13px; line-height: 1.4; letter-spacing: 0.01em; color: var(--text-secondary); display: flex; gap: 10px; }
.exp-row__work span { color: var(--text-tertiary); }

@media (prefers-reduced-motion: reduce) {
  .case-card { animation: none; }
  .case-card__arrow { transition: none; }
  .exp-row__panel { transition: none; }
}

/* ============================================================
   HERO — static node-tree fallback (Phase 3). The 3D layer (Phase 4)
   overlays .hero__map; this DOM stays beneath as the crawler/AT layer.
   ============================================================ */
.hero { gap: 32px; }
.hero__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 14px;
  border-bottom: var(--border-1) solid var(--border-hairline);
}
.hero__hint {
  margin: 0;
  font: var(--type-label);
  letter-spacing: 0.06em; /* §2 — slightly tighter so the hint holds one line */
  text-transform: uppercase;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap; /* §2 */
  flex: none;
}
.hero__hint span { color: var(--link); }

.hero__layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: start;
}

/* 3D active: graph takes the FULL right-canvas width + height; the node card
   floats as a hairline overlay panel (no shadow) over the top-right. */
.hero__layout--enhanced {
  display: block;
  position: relative;
}
.hero__layout--enhanced .hero__map--enhanced {
  width: 100%;
}
.hero__panel--float {
  position: absolute;
  top: 0;
  right: 0;
  width: 360px;
  z-index: 4;
  background: var(--bg-surface);
  border: var(--border-1) solid var(--border-hairline);
  padding: 16px;
}
.hero__panel--float .hero__panel-sticky { position: static; gap: 12px; }
.hero__panel--float .ncard { border: none; padding: 0; }

/* §4 — node-card close (×). Small mono glyph, ≥44px tap target, above content. */
.ncard { position: relative; }
.ncard__close {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 5;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1;
  transition: color var(--dur) var(--ease);
}
.ncard__close:hover { color: var(--text-primary); }
.ncard__close:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.hero__panel--float .ncard__close { top: -8px; right: -4px; }

/* §4 — mobile backdrop behind the floating card (tap to close). Desktop closes
   via empty-graph click / Esc, so the backdrop is mobile-only. */
.hero__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  background: transparent;
  border: none;
  padding: 0;
}

/* ---- map ---- */
.hero__map {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* When the 3D layer is active: the DOM tree stays in the document (crawler +
   keyboard fallback) but is taken out of layout flow and visually replaced by
   the canvas. Kept focusable; never display:none, never aria-hidden. */
.hero__map--enhanced {
  height: min(90vh, 1060px); /* §1.5 — taller canvas, kills the empty zone below */
  min-height: 620px;
}
.hero__map--enhanced > .hero__hub,
.hero__map--enhanced > .hero__branches {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
}

/* The WebGL overlay fills the map column */
.hero3d {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero3d canvas { display: block; width: 100%; height: 100%; }
.hero3d__skip {
  position: absolute;
  right: 0; top: 0;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-surface);
  border: var(--border-1) solid var(--border-hairline);
  padding: 8px 12px;
  cursor: pointer;
  font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-secondary);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero3d__skip:hover { border-color: var(--border-hairline-strong); color: var(--text-primary); }
.hero3d__hint {
  position: absolute;
  left: 0; bottom: 0;
  z-index: 3;
  font: var(--type-caption); letter-spacing: var(--ls-caption); text-transform: uppercase;
  color: var(--text-tertiary);
  pointer-events: none;
  white-space: nowrap; /* §2 */
}
/* zoom + reset controls — hairline boxes, no shadow, mono glyphs */
.hero3d__zoom {
  position: absolute;
  right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  border: var(--border-1) solid var(--border-hairline);
  background: var(--bg-surface);
}
.hero3d__zbtn {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  font: 500 18px/1 var(--font-mono);
  color: var(--text-secondary);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.hero3d__zbtn + .hero3d__zbtn { border-top: var(--border-1) solid var(--border-hairline); }
.hero3d__zbtn:hover { background: var(--bg-muted); color: var(--text-primary); }
.hero3d__zbtn--reset { font-size: 15px; color: var(--text-tertiary); }
.hero3d__zbtn:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }

/* center hub */
.hero__hub {
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  text-align: left;
  background: var(--bg-muted);
  border: var(--border-1) solid var(--border-hairline);
  border-left: 2px solid var(--text-primary);
  padding: 18px 22px;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hero__hub:hover { border-color: var(--border-hairline-strong); }
.hero__hub.is-active { border-left-color: var(--link); }
.hero__hub-mark { font: var(--weight-mono-bold) 18px var(--font-mono); color: var(--text-primary); }
.hero__hub-name { font: var(--weight-display) 24px var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
.hero__hub-kind { margin-left: auto; font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); }

/* branches grid */
.hero__branches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border-hairline);
  border: var(--border-1) solid var(--border-hairline);
}
.hero__branch {
  background: var(--bg-surface);
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 7 branches in a 2-col grid — let the last span full width so there's
   no empty cell showing the grid's hairline backing. */
.hero__branch:last-child { grid-column: 1 / -1; }
.hero__branch:last-child .hero__children { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.branchnode {
  display: flex;
  align-items: baseline;
  gap: 12px;
  background: none;
  border: none;
  padding: 0 0 10px;
  border-bottom: var(--border-1) solid var(--border-hairline);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.branchnode__index { font: var(--type-label); letter-spacing: var(--ls-label); color: var(--text-tertiary); }
.branchnode__label { font: var(--weight-display) 17px var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); transition: color var(--dur) var(--ease); }
.branchnode:hover .branchnode__label { color: var(--link); }
.branchnode.is-active .branchnode__label { color: var(--link); }

.hero__children { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* node button (L2) */
.mapnode {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  padding: 7px 8px 7px 4px;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--dur) var(--ease);
}
.mapnode:hover { background: var(--bg-muted); }
.mapnode__dot {
  width: 5px; height: 5px; flex: none;
  background: var(--text-tertiary);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mapnode__label {
  font: var(--type-body-sm);
  color: var(--text-secondary);
  transition: color var(--dur) var(--ease);
  line-height: 1.3;
}
.mapnode:hover .mapnode__label { color: var(--text-primary); }
.mapnode__nda {
  margin-left: auto;
  font: var(--type-caption);
  letter-spacing: var(--ls-caption);
  color: var(--text-tertiary);
  border: var(--border-1) solid var(--border-hairline);
  padding: 2px 5px;
}
.mapnode.is-active .mapnode__label { color: var(--link); }
.mapnode.is-active .mapnode__dot { background: var(--link); transform: scale(1.4); }
.mapnode:focus-visible,
.branchnode:focus-visible,
.hero__hub:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---- card panel ---- */
.hero__panel-sticky { position: sticky; top: 48px; display: flex; flex-direction: column; gap: 14px; }
.hero__panel-meta {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 12px; border-bottom: var(--border-1) solid var(--border-hairline);
}
.hero__panel-meta .u-label { color: var(--text-primary); }
.hero__panel-id { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-tertiary); }
.hero__cards { position: relative; }

/* the node card */
.ncard {
  border: var(--border-1) solid var(--border-hairline);
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--bg-surface);
  animation: vk-screen-in var(--dur) var(--ease);
}
/* clipped-but-present: crawler + AT keep these; visually/tabular removed */
.ncard--hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.ncard__kind { display: flex; align-items: center; gap: 12px; }
.ncard__nda {
  font: var(--type-caption); letter-spacing: var(--ls-caption); text-transform: uppercase;
  color: var(--text-tertiary); border: var(--border-1) solid var(--border-hairline); padding: 3px 7px;
}
.ncard__title { margin: 0; font: var(--weight-display) 22px / 1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text-primary); }
.ncard__body { margin: 0; font: var(--type-body); color: var(--text-secondary); }
.ncard__img {
  position: relative;
  aspect-ratio: 4 / 3;
  border: var(--border-1) solid var(--border-hairline);
  overflow: hidden;
}
.ncard__img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); display: block; }
.ncard__img--grid {
  background: var(--bg-muted);
  background-image:
    linear-gradient(var(--border-hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-hairline) 1px, transparent 1px);
  background-size: var(--space-6) var(--space-6);
  display: flex; align-items: flex-end; padding: 10px;
}
.ncard__img-tag { font: var(--type-caption); letter-spacing: var(--ls-caption); color: var(--text-tertiary); }
/* §1 — explicit asset-not-found state (no silent FIG. SLOT) */
.ncard__img--missing {
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-muted);
  aspect-ratio: 4 / 3;
}
.ncard__img-error {
  font: var(--type-caption); letter-spacing: var(--ls-caption);
  color: var(--link); text-align: center; padding: 0 12px;
}
/* §2 — branch card child list (clickable datasheet rows) */
.ncard__children { display: flex; flex-direction: column; margin: 2px 0; }
.ncard__childrow {
  display: flex; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  background: none; border: none;
  border-top: var(--border-1) solid var(--border-hairline);
  padding: 11px 2px;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.ncard__childrow:first-child { border-top: none; }
.ncard__childrow:hover { background: var(--bg-muted); padding-left: 6px; }
.ncard__childrow-kind {
  flex: none; min-width: 64px;
  font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-tertiary);
}
.ncard__childrow-title {
  flex: 1;
  font: var(--weight-display) 14px / 1.3 var(--font-display);
  letter-spacing: -0.01em; color: var(--text-primary);
}
.ncard__childrow .vk-icon { flex: none; color: var(--text-tertiary); align-self: center; }
.ncard__childrow:hover .vk-icon { color: var(--link); }
.ncard__detail { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ncard__detail-item { font: var(--type-body-sm); color: var(--text-secondary); display: flex; gap: 8px; }
.ncard__detail-item span { color: var(--text-tertiary); }
.ncard__open {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 2px;
  background: none; border: none; padding: 4px 0;
  cursor: pointer;
  font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--link);
  border-bottom: var(--border-1) solid var(--link);
  transition: gap var(--dur) var(--ease);
}
.ncard__open:hover { gap: 12px; }
.ncard__open:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .ncard { animation: none; }
  .mapnode__dot { transition: none; }
}

/* ============================================================
   HERO INTRO — DOM layer (orchestrated by useIntro / intro.jsx).
   Fixed full-viewport overlay; transforms/opacity only (no layout shift).
   ============================================================ */
.intro-layer {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.intro-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100vh;
  background: var(--border-hairline);
  transform: scaleY(0);
  transform-origin: center;
}
.intro-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--link);
  opacity: 0;
  will-change: transform, opacity;
}
.intro-beam {
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(91,113,135,0) 0%, rgba(91,113,135,0.15) 55%, var(--link) 100%);
  opacity: 0;
  will-change: width, opacity, transform;
}
.intro-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: var(--link);
  opacity: 0;
  will-change: transform, opacity;
}
.intro-skip {
  position: absolute;
  right: 24px;
  bottom: 20px;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  border: var(--border-1) solid var(--border-hairline);
  padding: 8px 12px;
  cursor: pointer;
  font: var(--type-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.intro-skip:hover { border-color: var(--border-hairline-strong); color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) {
  .intro-layer { display: none; }
}

/* R1 — conceal hero header + node card until the graph ignites */
.intro-conceal { opacity: 0 !important; pointer-events: none; }
.hero__head, .hero__panel { transition: opacity 0.5s var(--ease); }

/* R1 — hold the identity column's content (its direct children) until the
   textReveal phase, then stagger them in. transform+opacity only (no reflow). */
.app__aside.intro-hold > * { opacity: 0; transform: translateY(8px); }
.app__aside.intro-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.app__aside.intro-revealed > *:nth-child(1) { transition-delay: 0s; }
.app__aside.intro-revealed > *:nth-child(2) { transition-delay: 0.06s; }
.app__aside.intro-revealed > *:nth-child(3) { transition-delay: 0.12s; }
.app__aside.intro-revealed > *:nth-child(4) { transition-delay: 0.18s; }
.app__aside.intro-revealed > *:nth-child(5) { transition-delay: 0.24s; }
.app__aside.intro-revealed > *:nth-child(6) { transition-delay: 0.30s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .screen { gap: 36px; }
  .about__intro,
  .about__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about__intro { padding: 24px; }
  .about__portrait { max-width: 360px; }

  .exp-row__works-list { grid-template-columns: repeat(2, 1fr); }

  .hero__layout { grid-template-columns: 1fr; gap: 32px; }
  .hero__panel-sticky { position: static; }

  /* §1 + §3 — mobile node card.
     The float panel is HIDDEN by default (center = resting state → bare graph
     on load). It only appears once a real node is tapped (.hero__panel--has-card),
     and then as a BOTTOM SHEET so the upper graph stays visible and the × +
     backdrop are always one tap from the graph. */
  .hero__backdrop { display: block; }
  .hero__panel--float { display: none; }
  .hero__panel--float.hero__panel--has-card {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    transform: none;
    width: auto;
    max-height: 72vh;
    overflow-y: auto;
    z-index: 5;
    padding: 22px 20px 20px;
    border-top: var(--border-1) solid var(--border-hairline);
    background: var(--bg-surface);
  }
  /* × sits comfortably inside the sheet, always above content */
  .hero__panel--has-card .ncard__close { top: -2px; right: -2px; }
}

@media (max-width: 560px) {
  .screen__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .about__expertise { grid-template-columns: 1fr 1fr; }

  .work__list { gap: 20px; }
  .case-card__cover { aspect-ratio: 4 / 5; }
  .case-card__title { font-size: 25px; max-width: 100%; }
  .case-card__desc { font-size: 13px; }
  .case-card__overlay { left: 20px; right: 20px; bottom: 22px; gap: 12px; }
  .case-card__meta { flex-direction: row; gap: 12px; align-items: baseline; }
  .case-card__cats { display: none; }
  .case-card__top { top: 16px; right: 16px; }
  .case-card__arrow { display: none; }

  .exp-row__head { gap: 14px; padding: 16px 16px 18px; }
  .exp-row__company { font-size: 20px; }
  .exp-row__marker { font-size: 20px; }
  .exp-row__panel-inner { padding: 0 16px 20px 16px; }
  .exp-row__works-list { grid-template-columns: 1fr; }

  .hero__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__branches { grid-template-columns: 1fr; }
  .hero__hub { flex-wrap: wrap; gap: 8px 16px; }
  .hero__hub-kind { margin-left: 0; width: 100%; }
}