/* =========================================================
   P2 VISUAL SYSTEM TOKENS

   Shared semantic primitives live here. DARK is the default identity;
   LIGHT overrides identity values in 20-light.css without redefining the
   engineering vocabulary. Keep compatibility aliases until inherited CSS
   has been deliberately migrated rather than breaking it all at once.
   ========================================================= */

:root {

  /* =======================================================
     TYPOGRAPHY
     ======================================================= */

  --font-body:
    Arial,
    Helvetica,
    sans-serif;

  --font-display:
    "Arial Black",
    "Arial Narrow Bold",
    Arial,
    Helvetica,
    sans-serif;

  --font-editorial:
    Georgia,
    "Times New Roman",
    "Liberation Serif",
    serif;

  --font-mono:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    "Courier New",
    monospace;

  --font-identity-display:
    var(--font-display);

  --font-identity-body:
    var(--font-body);

  --type-meta:10px;
  --type-small:13px;
  --line-body:1.55;
  --tracking-meta:.13em;


  /* =======================================================
     SEMANTIC COLOR — DARK DEFAULT
     ======================================================= */

  --color-canvas:#050505;
  --color-text:#ededed;
  --color-text-muted:#8a8a8a;
  --color-text-secondary:#c6c6c6;

  --color-surface:#090909;
  --color-surface-raised:#101010;

  --color-edge:#303030;
  --color-edge-strong:#666;

  --color-signal:#b7ffdc;
  --color-signal-soft:rgba(183,255,220,.11);

  --color-shadow:#141414;
  --color-danger:#ff6f6f;
  --color-on-signal:#050505;

  /* Compatibility aliases for inherited P1/P2A selectors. */
  --bg:var(--color-canvas);
  --fg:var(--color-text);
  --muted:var(--color-text-muted);
  --panel:var(--color-surface);
  --panel2:var(--color-surface-raised);
  --line:var(--color-edge);
  --accent:var(--color-signal);
  --accent-soft:var(--color-signal-soft);
  --shadow:var(--color-shadow);
  --danger:var(--color-danger);


  /* =======================================================
     GLOBAL EFFECT INTENSITY
     ======================================================= */

  --fx-scanline-opacity:.11;
  --fx-noise-opacity:.018;
  --fx-noise-cycle:14s;
  --fx-header-blur:12px;


  /* =======================================================
     SPACING — 4px ROOT
     ======================================================= */

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;


  /* =======================================================
     LAYOUT
     ======================================================= */

  --layout-max:1280px;
  --layout-gutter:24px;
  --layout-header:64px;
  --layout-mobile-gutter:12px;
  --content-measure:72ch;
  --touch-target-min:44px;


  /* =======================================================
     GEOMETRY
     ======================================================= */

  --border-hairline:1px;
  --border-emphasis:2px;
  --radius-control:2px;
  --radius-panel:0px;
  --radius-pill:999px;
  --shadow-offset:6px;


  /* =======================================================
     MOTION
     ======================================================= */

  --motion-instant:80ms;
  --motion-fast:140ms;
  --motion-base:220ms;
  --motion-slow:420ms;

  --ease-standard:
    cubic-bezier(.2,.7,.2,1);

  --ease-sharp:
    cubic-bezier(.4,0,.6,1);


  /* =======================================================
     LAYERING
     ======================================================= */

  --z-base:0;
  --z-content:10;
  --z-header:60;
  --z-fx:70;
  --z-overlay:90;


  /* =======================================================
     ACCESSIBILITY
     ======================================================= */

  --focus-width:2px;
  --focus-offset:3px;

}


:focus-visible {

  outline:
    var(--focus-width)
    solid
    var(--color-signal);

  outline-offset:
    var(--focus-offset);

}
/* =========================================================
   BASE
   ========================================================= */

* {
  box-sizing:border-box;
}


html {
  background:var(--color-canvas);
}


html,
body {
  margin:0;
  min-height:100%;
}


body {

  background:var(--color-canvas);
  color:var(--color-text);

  font-family:
    var(--font-identity-body);

  transition:
    background var(--motion-slow) var(--ease-standard),
    color var(--motion-slow) var(--ease-standard);

}


button,
a {
  -webkit-tap-highlight-color:transparent;
}


a {
  color:inherit;
}


button {
  font:inherit;
}


::selection {
  background:var(--color-signal);
  color:var(--color-on-signal);
}


.shell {

  width:min(
    var(--layout-max),
    calc(100% - (var(--layout-gutter) * 2))
  );

  margin:auto;

}


/* =========================================================
   GLOBAL FX
   ========================================================= */

.scanlines {

  position:fixed;
  inset:0;

  pointer-events:none;

  z-index:var(--z-fx);

  opacity:
    var(--fx-scanline-opacity);

  background:

    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 2px,
      rgba(255,255,255,.08) 3px
    );

  transition:
    opacity var(--motion-slow) var(--ease-standard);

}


.noise {

  position:fixed;

  inset:-20%;

  pointer-events:none;

  z-index:var(--z-fx);

  opacity:
    var(--fx-noise-opacity);

  background-image:

    radial-gradient(
      currentColor 1px,
      transparent 1px
    );

  background-size:7px 7px;

  animation:
    noiseMove var(--fx-noise-cycle) linear infinite;

}


@keyframes noiseMove {

  0% {
    transform:
      translate3d(-1%,0,0);
  }

  50% {
    transform:
      translate3d(1%,1%,0);
  }

  100% {
    transform:
      translate3d(-1%,0,0);
  }

}


/* =========================================================
   HEADER
   ========================================================= */

header {

  position:sticky;

  top:0;

  z-index:var(--z-header);

  backdrop-filter:
    blur(var(--fx-header-blur));

  background:
    color-mix(
      in srgb,
      var(--color-canvas) 88%,
      transparent
    );

  border-bottom:
    var(--border-hairline)
    solid
    var(--color-edge);

}


.top {

  min-height:
    var(--layout-header);

  display:grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:center;

  gap:var(--space-5);

}


.brand {

  font-family:
    var(--font-mono);

  font-size:11px;
  font-weight:700;
  line-height:1;

  letter-spacing:.18em;

  text-transform:uppercase;

}


.controls {

  display:flex;

  align-items:center;

  justify-content:center;

  gap:var(--space-4);

}


.lang-switch {

  display:flex;

  align-items:center;

  gap:var(--space-1);

  font-family:
    var(--font-mono);

  font-size:11px;
  line-height:1;

}


.lang-switch button {

  min-width:
    var(--touch-target-min);

  min-height:
    var(--touch-target-min);

  display:grid;
  place-items:center;

  border:0;

  background:none;

  color:var(--color-text-muted);

  padding:
    0 var(--space-2);

  cursor:pointer;

  letter-spacing:.12em;

  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);

}


.lang-switch button:hover {

  color:var(--color-text);

  background:
    var(--color-signal-soft);

}


.lang-switch button.active {

  color:var(--color-signal);

}


.slash {
  color:var(--color-edge-strong);
}


/* =========================================================
   SIDE SWITCH
   ========================================================= */

.side-switch {

  display:flex;

  align-items:center;

  gap:var(--space-2);

}


.side-label {

  font-family:
    var(--font-mono);

  font-size:10px;
  line-height:1;

  letter-spacing:.14em;

  color:var(--color-text-muted);

  text-transform:uppercase;

  transition:
    color var(--motion-base) var(--ease-standard);

}


.side-switch[data-active="dark"]
.side-dark-label,

.side-switch[data-active="light"]
.side-light-label {

  color:var(--color-text);

}


.switch {

  width:78px;
  height:var(--touch-target-min);

  position:relative;

  border:
    var(--border-hairline)
    solid
    var(--color-edge-strong);

  border-radius:
    var(--radius-pill);

  cursor:pointer;

  padding:0;

  background:
    linear-gradient(
      90deg,
      #090909,
      #e9e9e3
    );

  overflow:hidden;

  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);

}


.switch:hover {

  border-color:
    var(--color-signal);

  box-shadow:
    0 0 0 1px
    var(--color-signal-soft);

}


.switch-orb {

  position:absolute;

  top:7px;
  left:7px;

  width:28px;
  height:28px;

  border-radius:50%;

  background:#080808;

  border:
    var(--border-hairline)
    solid
    rgba(255,255,255,.45);

  box-shadow:
    0 0 16px
    rgba(183,255,220,.28);

  transition:
    transform var(--motion-slow) var(--ease-standard),
    background var(--motion-slow) var(--ease-standard),
    box-shadow var(--motion-slow) var(--ease-standard);

}


html[data-side="light"]
.switch-orb {

  transform:
    translateX(36px);

  background:#fff;

  border-color:#aaa;

  box-shadow:
    0 3px 14px
    rgba(0,0,0,.14);

}


.header-meta {

  text-align:right;

  color:var(--color-text-muted);

  font-family:
    var(--font-mono);

  font-size:10px;
  line-height:1.45;

  letter-spacing:.11em;

  text-transform:uppercase;

}


/* =========================================================
   SIDE CONTAINERS
   ========================================================= */

.side {

  animation:
    reveal var(--motion-slow) var(--ease-standard) both;

}


@keyframes reveal {

  from {
    opacity:0;
    transform:translateY(var(--space-2));
  }

  to {
    opacity:1;
    transform:none;
  }

}


html[data-side="dark"]
.side-light {

  display:none;

}


html[data-side="light"]
.side-dark {

  display:none;

}
/* =========================================================
   DARK SIDE
   ========================================================= */

.dark-hero {

  min-height:72vh;

  padding:
    var(--space-8)
    0
    var(--space-7);

  display:grid;

  grid-template-columns:
    minmax(0,1.4fr)
    minmax(320px,.68fr);

  gap:var(--space-7);

  align-items:center;

}


.dark-title {

  margin:0;

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      68px,
      10.5vw,
      150px
    );

  font-weight:900;

  line-height:.78;

  letter-spacing:-.07em;

  text-transform:uppercase;

}


.dark-title .outline {

  display:block;

  color:transparent;

  -webkit-text-stroke:
    var(--border-hairline)
    var(--color-edge-strong);

}


.dark-title .acid {

  display:block;

  color:var(--color-signal);

  transform:
    translateX(
      clamp(
        20px,
        4vw,
        56px
      )
    );

  text-shadow:
    0 0 24px
    var(--color-signal-soft);

}


.hero-copy {

  max-width:62ch;

  margin-top:var(--space-6);

  color:var(--color-text-secondary);

  font-size:
    clamp(
      16px,
      1.55vw,
      19px
    );

  line-height:var(--line-body);

}


/* =========================================================
   CCTV MONITOR
   ========================================================= */

.monitor {

  position:relative;

  min-height:500px;

  overflow:hidden;

  cursor:crosshair;

  user-select:none;

  border:
    var(--border-hairline)
    solid
    var(--color-edge-strong);

  background:

    linear-gradient(
      180deg,
      rgba(255,255,255,.025),
      transparent 22%
    ),

    radial-gradient(
      circle at 48% 42%,
      rgba(255,255,255,.12),
      transparent 3%
    ),

    radial-gradient(
      ellipse at 48% 50%,
      #171717,
      #080808 57%,
      #000
    );

  box-shadow:
    var(--shadow-offset)
    var(--shadow-offset)
    0
    var(--color-shadow);

}


.monitor.flash {

  animation:
    cameraFlash var(--motion-fast) var(--ease-sharp);

}


@keyframes cameraFlash {

  0% {
    filter:invert(0);
  }

  40% {
    filter:invert(1);
  }

  100% {
    filter:invert(0);
  }

}


.monitor::before {

  content:
    "CAM_04 // UNKNOWN INPUT";

  position:absolute;

  top:var(--space-4);
  left:var(--space-4);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1;

  color:#999;

  letter-spacing:var(--tracking-meta);

}


.monitor-rec {

  position:absolute;

  top:var(--space-4);
  right:var(--space-4);

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:11px;
  line-height:1;

  letter-spacing:.08em;

}


.crosshair {

  position:absolute;

  left:50%;
  top:50%;

  width:116px;
  height:116px;

  transform:
    translate(-50%,-50%);

  border:
    var(--border-hairline)
    solid
    rgba(255,255,255,.22);

  transition:
    left var(--motion-instant) linear,
    top var(--motion-instant) linear;

}


.crosshair::before,
.crosshair::after {

  content:"";

  position:absolute;

  background:
    rgba(255,255,255,.25);

}


.crosshair::before {

  width:160px;
  height:1px;

  left:-23px;
  top:57px;

}


.crosshair::after {

  height:160px;
  width:1px;

  top:-23px;
  left:57px;

}


.monitor-data {

  position:absolute;

  left:var(--space-4);
  bottom:var(--space-4);
  right:var(--space-4);

  color:#aaa;

  font-family:
    var(--font-mono);

  font-size:11px;
  line-height:1.55;

  letter-spacing:.04em;

  text-transform:uppercase;

}


.monitor-hint {

  color:#666;

  margin-top:var(--space-2);

}


/* =========================================================
   COMMON SECTION
   ========================================================= */

.section {

  margin:
    var(--space-8)
    0;

}


.section-head {

  display:flex;

  justify-content:
    space-between;

  align-items:flex-end;

  gap:var(--space-5);

  margin-bottom:var(--space-5);

  padding-bottom:var(--space-3);

  border-bottom:
    var(--border-hairline)
    solid
    var(--color-edge);

}


.section-head h2 {

  margin:0;

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      26px,
      3.4vw,
      46px
    );

  font-weight:900;
  line-height:.94;

  letter-spacing:-.045em;

  text-transform:uppercase;

}


.section-code {

  color:var(--color-text-muted);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1.2;

  letter-spacing:.14em;

  text-transform:uppercase;

}


/* =========================================================
   DARK PROJECT ARCHIVE
   P2B.2B: composition carries hierarchy before status copy.
   ========================================================= */

.section--archive {

  margin-bottom:var(--space-9);

}


.projects {

  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  gap:var(--space-4);

  align-items:stretch;

}


.project {

  grid-column:span 4;

  min-height:248px;

  position:relative;

  display:flex;

  flex-direction:column;

  padding:var(--space-5);

  text-decoration:none;

  color:inherit;

  border:
    var(--border-hairline)
    solid
    var(--color-edge);

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.022),
      rgba(255,255,255,.008)
    );

  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard);

}


.project::before {

  content:"";

  position:absolute;

  top:-1px;
  left:-1px;

  width:34px;
  height:2px;

  background:var(--color-edge-strong);

}


.project[data-project-rank="primary"] {

  grid-column:span 7;

  min-height:326px;

  padding:var(--space-6);

  border-color:var(--color-edge-strong);

  background:
    linear-gradient(
      145deg,
      rgba(190,255,0,.04),
      rgba(255,255,255,.018) 42%,
      rgba(255,255,255,.006)
    );

}


.project[data-project-rank="secondary"] {

  grid-column:span 5;

  min-height:326px;

  padding:var(--space-6);

  border-color:var(--color-edge-strong);

}


.project[data-project-state="preview"]::before,
.project[data-project-state="public"]::before {

  width:34%;

  background:var(--color-signal);

}


.project[data-project-state="private"]::before,
.project[data-project-state="lab"]::before {

  width:18%;

  background:#8a8a8a;

}


.project[data-project-state="experiment"]::before {

  width:54px;

  background:#666;

}


.project[data-project-state="workbench"] {

  border-style:dashed;

  background:transparent;

}


.project[data-project-state="workbench"]::before {

  width:22px;

  background:#555;

}


a.project:hover {

  transform:
    translate(-2px,-2px);

  box-shadow:
    var(--shadow-offset)
    var(--shadow-offset)
    0
    var(--color-shadow);

  border-color:
    var(--color-edge-strong);

  background:
    var(--color-surface-raised);

}


.project-num {

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1;

  letter-spacing:var(--tracking-meta);

}


.project[data-project-state="private"]
.project-num,
.project[data-project-state="lab"]
.project-num {

  color:#a0a0a0;

}


.project[data-project-state="experiment"]
.project-num,
.project[data-project-state="workbench"]
.project-num {

  color:#707070;

}


.project h3 {

  margin:
    var(--space-5)
    0
    var(--space-3);

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      27px,
      3vw,
      40px
    );

  font-weight:900;
  line-height:.92;

  letter-spacing:-.04em;

  text-transform:uppercase;

}


.project[data-project-rank="primary"] h3 {

  max-width:8ch;

  font-size:
    clamp(
      44px,
      5vw,
      70px
    );

}


.project[data-project-rank="secondary"] h3 {

  max-width:10ch;

  font-size:
    clamp(
      38px,
      4vw,
      58px
    );

}


.project p {

  margin:
    0 0 var(--space-7);

  color:var(--color-text-muted);

  line-height:1.52;

  font-size:14px;

}


.project[data-project-rank="primary"] p,
.project[data-project-rank="secondary"] p {

  max-width:58ch;

  color:var(--color-text-secondary);

  font-size:15px;

}


.project-meta {

  position:absolute;

  left:var(--space-5);
  right:var(--space-5);
  bottom:var(--space-4);

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:var(--space-3);

  color:#6f6f6f;

  font-family:
    var(--font-mono);

  font-size:9px;
  line-height:1.2;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.project[data-project-rank="primary"]
.project-meta,
.project[data-project-rank="secondary"]
.project-meta {

  left:var(--space-6);
  right:var(--space-6);
  bottom:var(--space-5);

}


.project[data-project-state="preview"]
.project-meta,
.project[data-project-state="public"]
.project-meta {

  color:#9b9b9b;

}


.project[data-project-state="experiment"]
.project-meta,
.project[data-project-state="workbench"]
.project-meta {

  color:#5f5f5f;

}


.project-arrow {

  color:var(--color-signal);

  font-size:21px;

}


.project[data-project-state="private"]
.project-arrow,
.project[data-project-state="lab"]
.project-arrow,
.project[data-project-state="workbench"]
.project-arrow {

  color:#777;

}


/* =========================================================
   SOCIAL / OUTSIDE CHANNELS
   A transmission list, not another card grid.
   ========================================================= */

.section--channels {

  margin-top:var(--space-9);
  margin-bottom:var(--space-8);

}


.section--channels
.section-head {

  margin-bottom:0;

  border-bottom:0;

}


.social-strip {

  display:grid;

  grid-template-columns:1fr;

  gap:0;

  border-top:
    var(--border-emphasis)
    solid
    var(--color-edge-strong);

  border-bottom:
    var(--border-hairline)
    solid
    var(--color-edge);

}


.social {

  min-height:112px;

  padding:
    var(--space-4)
    var(--space-3);

  display:flex;

  align-items:center;

  justify-content:
    space-between;

  gap:var(--space-4);

  text-decoration:none;

  border:0;

  border-bottom:
    var(--border-hairline)
    solid
    var(--color-edge);

  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    padding var(--motion-fast) var(--ease-standard);

}


.social:last-child {

  border-bottom:0;

}


.social:hover {

  padding-left:var(--space-4);
  padding-right:var(--space-4);

  background:
    var(--color-signal);

  color:var(--color-on-signal);

}


.social-main {

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      23px,
      3vw,
      40px
    );

  font-weight:900;

  letter-spacing:-.035em;

  text-transform:uppercase;

}


.social-sub {

  margin-top:var(--space-2);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1.2;

  color:var(--color-text-muted);

  letter-spacing:.12em;

}


.social:hover
.social-sub {

  color:currentColor;

}


/* =========================================================
   DARK MANIFESTO
   Strong scale break after the archive and outside channels.
   ========================================================= */

.manifesto {

  display:grid;

  grid-template-columns:
    minmax(150px,.32fr)
    minmax(0,1fr);

  gap:var(--space-8);

  margin:
    var(--space-9)
    0;

  padding-top:var(--space-6);

  border-top:
    var(--border-emphasis)
    solid
    var(--color-signal);

}


.manifesto-label {

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1.3;

  letter-spacing:.16em;

}


.manifesto-text {

  margin:0;

  max-width:920px;

  font-size:
    clamp(
      25px,
      3.8vw,
      48px
    );

  line-height:1.08;

  letter-spacing:-.035em;

}
/* =========================================================
   LIGHT SIDE
   ========================================================= */

html[data-side="light"] {

  --color-canvas:#f0efe9;
  --color-text:#101010;
  --color-text-muted:#696963;
  --color-text-secondary:#454542;

  --color-surface:#f8f7f1;
  --color-surface-raised:#e9e8e1;

  --color-edge:#c9c8c0;
  --color-edge-strong:#8d8b82;

  --color-signal:#1648ff;
  --color-signal-soft:rgba(22,72,255,.08);

  --color-shadow:#d7d6cf;
  --color-on-signal:#fff;

  --font-identity-display:
    var(--font-editorial);

  --font-identity-body:
    var(--font-body);

  --fx-scanline-opacity:.018;
  --fx-noise-opacity:.006;
  --fx-header-blur:10px;

  /* Keep inherited short aliases coherent during migration. */
  --bg:var(--color-canvas);
  --fg:var(--color-text);
  --muted:var(--color-text-muted);
  --panel:var(--color-surface);
  --panel2:var(--color-surface-raised);
  --line:var(--color-edge);
  --accent:var(--color-signal);
  --accent-soft:var(--color-signal-soft);
  --shadow:var(--color-shadow);

}


.light-wrap {

  padding:
    var(--space-8)
    0
    var(--space-7);

}


.prof-hero {

  display:grid;

  grid-template-columns:
    minmax(0,1.32fr)
    minmax(300px,.68fr);

  gap:var(--space-8);

  align-items:end;

  min-height:62vh;

  padding-bottom:var(--space-8);

}


.prof-kicker {

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:11px;
  line-height:1.2;

  letter-spacing:.16em;

  text-transform:uppercase;

  margin-bottom:var(--space-5);

}


.prof-title {

  margin:0;

  max-width:900px;

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      54px,
      7.6vw,
      112px
    );

  font-weight:600;

  line-height:.88;

  letter-spacing:-.055em;

  text-transform:uppercase;

}


.prof-title span {

  color:var(--color-signal);

}


.prof-summary {

  margin-top:var(--space-6);

  max-width:68ch;

  font-size:
    clamp(
      17px,
      1.65vw,
      21px
    );

  line-height:var(--line-body);

  color:var(--color-text-secondary);

}


.prof-card {

  border:
    var(--border-hairline)
    solid
    var(--color-edge-strong);

  border-top:
    var(--border-emphasis)
    solid
    var(--color-signal);

  background:
    var(--color-surface);

  padding:var(--space-6);

  box-shadow:
    var(--shadow-offset)
    var(--shadow-offset)
    0
    var(--color-shadow);

}


.prof-card-label {

  color:var(--color-text-muted);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1.2;

  letter-spacing:.14em;

  text-transform:uppercase;

}


.prof-name {

  margin:
    var(--space-5)
    0
    var(--space-2);

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  font-weight:800;

  letter-spacing:-.035em;

}


.prof-role {

  color:var(--color-signal);

  font-size:15px;

  line-height:1.45;

}


.linkedin {

  min-height:
    var(--touch-target-min);

  display:inline-flex;

  align-items:center;

  margin-top:var(--space-6);

  padding:
    0 var(--space-4);

  text-decoration:none;

  border:
    var(--border-hairline)
    solid
    var(--color-signal);

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:11px;
  line-height:1;

  letter-spacing:.12em;

  text-transform:uppercase;

  transition:
    color var(--motion-fast) var(--ease-standard),
    background var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);

}


.linkedin:hover {

  color:var(--color-on-signal);
  background:var(--color-signal);

  transform:translateY(-1px);

}


/* =========================================================
   EVIDENCE
   Unequal measure reflects narrative weight rather than dashboard symmetry.
   ========================================================= */

.section--evidence {

  margin-top:var(--space-9);
  margin-bottom:var(--space-9);

}


.metrics {

  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  gap:var(--space-4);

  align-items:end;

}


.metric {

  grid-column:span 2;

  min-height:164px;

  padding:
    var(--space-5)
    0;

  border-top:
    var(--border-hairline)
    solid
    var(--color-edge-strong);

  border-bottom:
    var(--border-hairline)
    solid
    var(--color-edge);

  background:transparent;

}


.metric--lead {

  grid-column:span 5;

  min-height:210px;

  border-top:
    var(--border-emphasis)
    solid
    var(--color-signal);

}


.metric--strong {

  grid-column:span 3;

  min-height:184px;

}


.metric-value {

  color:var(--color-signal);

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      38px,
      4.4vw,
      60px
    );

  font-weight:600;

  line-height:.95;

  letter-spacing:-.05em;

}


.metric--lead
.metric-value {

  font-size:
    clamp(
      58px,
      7.2vw,
      94px
    );

}


.metric--strong
.metric-value {

  font-size:
    clamp(
      46px,
      5.3vw,
      72px
    );

}


.metric-label {

  margin-top:var(--space-4);

  max-width:28ch;

  color:var(--color-text-muted);

  font-size:var(--type-small);

  line-height:1.48;

}


.metric--lead
.metric-label {

  max-width:34ch;

  color:var(--color-text-secondary);

}


/* =========================================================
   OPERATING MODEL
   Alternating editorial measure replaces a symmetric 2x2 service grid.
   ========================================================= */

.section--operating {

  margin-top:var(--space-9);
  margin-bottom:var(--space-9);

}


.work-grid {

  display:grid;

  grid-template-columns:
    repeat(12,minmax(0,1fr));

  gap:
    var(--space-5)
    var(--space-7);

}


.work {

  grid-column:span 5;

  min-height:220px;

  padding:
    var(--space-5)
    0
    var(--space-7);

  border-top:
    var(--border-hairline)
    solid
    var(--color-edge-strong);

  background:transparent;

}


.work[data-work-width="wide"] {

  grid-column:span 7;

}


.work--lead {

  border-top:
    var(--border-emphasis)
    solid
    var(--color-signal);

}


.work-index {

  color:var(--color-signal);

  font-family:
    var(--font-mono);

  font-size:var(--type-meta);
  line-height:1;

  letter-spacing:.12em;

}


.work h3 {

  margin:
    var(--space-5)
    0
    var(--space-3);

  max-width:18ch;

  font-family:
    var(--font-identity-display);

  font-size:
    clamp(
      24px,
      3vw,
      38px
    );

  font-weight:600;

  line-height:1;

  letter-spacing:-.035em;

  text-transform:none;

}


.work--lead h3 {

  max-width:14ch;

  font-size:
    clamp(
      32px,
      4vw,
      50px
    );

}


.work p {

  margin-bottom:0;

  color:var(--color-text-muted);

  line-height:var(--line-body);

  max-width:570px;

}


.work--lead p {

  color:var(--color-text-secondary);

}


/* =========================================================
   VOCABULARY
   Third layer: quiet language, not another field of cards.
   ========================================================= */

.section--vocabulary {

  margin-top:var(--space-9);

}


.section--vocabulary
.section-head {

  margin-bottom:var(--space-4);

  border-bottom-color:var(--color-edge);

}


.section--vocabulary
.section-head h2 {

  font-size:
    clamp(
      23px,
      2.8vw,
      34px
    );

  font-weight:600;

  letter-spacing:-.03em;

}


.skills {

  display:flex;

  flex-wrap:wrap;

  gap:
    var(--space-2)
    0;

}


.skill {

  padding:
    var(--space-2)
    var(--space-3)
    var(--space-2)
    0;

  margin-right:var(--space-3);

  border:0;

  border-right:
    var(--border-hairline)
    solid
    var(--color-edge);

  background:transparent;

  color:var(--color-text-muted);

  font-family:
    var(--font-mono);

  font-size:10px;
  line-height:1.2;

  letter-spacing:.1em;

  text-transform:uppercase;

}


.skill:last-child {

  border-right:0;

}
/* =========================================================
   FOOTER
   ========================================================= */

footer {

  margin-top:var(--space-9);

  padding:
    var(--space-5)
    0
    var(--space-7);

  border-top:
    var(--border-hairline)
    solid
    var(--color-edge);

  display:flex;

  justify-content:
    space-between;

  gap:var(--space-5);

  flex-wrap:wrap;

  color:var(--color-text-muted);

  font-family:
    var(--font-mono);

  font-size:9px;
  line-height:1.35;

  letter-spacing:.13em;

  text-transform:uppercase;

}
/* =========================================================
   TABLET / NARROW DESKTOP
   ========================================================= */

@media(max-width:900px) {

  .top {

    grid-template-columns:
      1fr auto;

    padding:
      var(--space-2)
      0;

    gap:var(--space-4);

  }


  .controls {

    justify-content:flex-end;

  }


  .header-meta {

    display:none;

  }


  .dark-hero,
  .prof-hero {

    grid-template-columns:1fr;

  }


  .dark-hero {

    padding-top:var(--space-7);

    gap:var(--space-6);

  }


  .prof-hero {

    gap:var(--space-6);

    padding-bottom:var(--space-7);

  }


  .monitor {

    min-height:340px;

  }


  .projects {

    grid-template-columns:
      1fr 1fr;

  }


  .project,
  .project[data-project-rank="primary"],
  .project[data-project-rank="secondary"] {

    grid-column:auto;

  }


  .project[data-project-rank="primary"],
  .project[data-project-rank="secondary"] {

    min-height:300px;

  }


  .metrics {

    grid-template-columns:
      1fr 1fr;

    gap:var(--space-5);

  }


  .metric,
  .metric--strong {

    grid-column:auto;

  }


  .metric--lead {

    grid-column:1 / -1;

    min-height:190px;

  }


  .work-grid {

    grid-template-columns:
      1fr 1fr;

    gap:
      var(--space-5)
      var(--space-6);

  }


  .work,
  .work[data-work-width="wide"] {

    grid-column:auto;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:620px) {

  .shell {

    width:
      min(
        var(--layout-max),
        calc(
          100%
          -
          (var(--layout-mobile-gutter) * 2)
        )
      );

  }


  .top {

    gap:var(--space-3);

  }


  .brand {

    font-size:9px;

    letter-spacing:.14em;

  }


  .controls {

    gap:var(--space-2);

  }


  .side-label {

    display:none;

  }


  .dark-hero {

    padding-top:var(--space-6);

  }


  .dark-title {

    font-size:
      clamp(
        56px,
        20vw,
        96px
      );

    letter-spacing:-.06em;

  }


  .dark-title .acid {

    transform:
      translateX(var(--space-3));

  }


  .hero-copy {

    margin-top:var(--space-5);

  }


  .monitor {

    min-height:300px;

    box-shadow:
      var(--space-1)
      var(--space-1)
      0
      var(--color-shadow);

  }


  .section {

    margin:
      var(--space-7)
      0;

  }


  .section--archive,
  .section--channels,
  .section--evidence,
  .section--operating,
  .section--vocabulary {

    margin-top:var(--space-8);
    margin-bottom:var(--space-8);

  }


  .section-head {

    align-items:flex-start;

    flex-direction:column;

    gap:var(--space-2);

    margin-bottom:var(--space-4);

  }


  .projects,
  .work-grid,
  .social-strip {

    grid-template-columns:1fr;

  }


  .project,
  .project[data-project-rank="primary"],
  .project[data-project-rank="secondary"] {

    grid-column:auto;

    min-height:248px;

    padding:var(--space-5);

  }


  .project[data-project-rank="primary"] {

    min-height:286px;

  }


  .project[data-project-rank="secondary"] {

    min-height:270px;

  }


  .project[data-project-rank="primary"] h3,
  .project[data-project-rank="secondary"] h3 {

    max-width:10ch;

    font-size:
      clamp(
        34px,
        12vw,
        48px
      );

  }


  .project[data-project-rank="primary"]
  .project-meta,
  .project[data-project-rank="secondary"]
  .project-meta {

    left:var(--space-5);
    right:var(--space-5);
    bottom:var(--space-4);

  }


  .metrics {

    grid-template-columns:
      1fr 1fr;

    gap:
      var(--space-4)
      var(--space-5);

  }


  .metric,
  .metric--strong {

    grid-column:auto;

    min-height:148px;

  }


  .metric--lead {

    grid-column:1 / -1;

    min-height:174px;

  }


  .metric:last-child {

    grid-column:1 / -1;

    min-height:128px;

  }


  .metric--lead
  .metric-value {

    font-size:
      clamp(
        58px,
        19vw,
        78px
      );

  }


  .work,
  .work[data-work-width="wide"] {

    grid-column:auto;

    min-height:auto;

    padding:
      var(--space-5)
      0
      var(--space-6);

  }


  .work--lead h3 {

    font-size:
      clamp(
        30px,
        10vw,
        42px
      );

  }


  .manifesto {

    grid-template-columns:1fr;

    gap:var(--space-5);

    margin:
      var(--space-8)
      0;

  }


  .light-wrap {

    padding-top:var(--space-7);

  }


  .prof-title {

    font-size:
      clamp(
        48px,
        16vw,
        78px
      );

    line-height:.9;

  }


  /*
     Russian LIGHT has a much longer signal word than EN. Keep the first two
     verbs at a strong editorial scale, then deliberately step the blue final
     action down as its own line. This preserves hierarchy instead of shrinking
     the whole title, clipping the word, or introducing arbitrary word breaks.
  */
  html[lang="ru"][data-side="light"]
  .prof-title {

    max-width:100%;

    font-size:
      clamp(
        48px,
        14vw,
        60px
      );

    letter-spacing:-.06em;

  }


  html[lang="ru"][data-side="light"]
  .prof-title span {

    display:block;

    font-size:.72em;

    letter-spacing:-.045em;

    white-space:nowrap;

  }


  .prof-card {

    padding:var(--space-5);

    box-shadow:
      var(--space-1)
      var(--space-1)
      0
      var(--color-shadow);

  }


  .section--vocabulary
  .section-head h2 {

    font-size:
      clamp(
        22px,
        8vw,
        30px
      );

  }


  .skill {

    font-size:9px;

  }


  footer {

    margin-top:var(--space-8);

    gap:var(--space-3);

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(
  prefers-reduced-motion:reduce
) {

  *,
  *::before,
  *::after {

    scroll-behavior:auto !important;

    animation-duration:
      .001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .001ms !important;

  }


  .noise {

    animation:none !important;

    transform:none !important;

  }

}


/* =========================================================
   P3A DARK HERO COMPOSITION
   Keep the inherited display title from colliding with the
   wider interactive identity field on desktop. Mobile keeps
   the established P2 scale above.
   ========================================================= */

@media(min-width:961px) {

  .side-dark .dark-title {

    font-size:
      clamp(
        68px,
        8.6vw,
        126px
      );

  }


  .side-dark .dark-title .acid {

    transform:
      translateX(
        clamp(
          12px,
          2vw,
          28px
        )
      );

  }

}


/* P3A mobile grid items must be allowed to shrink below min-content width. */
@media(max-width:960px) {

  .side-dark .monitor,
  .signal-field,
  .signal-node-grid,
  .signal-node,
  .signal-detail {

    min-width:0;
    max-width:100%;

  }


  .signal-detail-title,
  .signal-detail-kicker,
  .signal-detail-body,
  .signal-artifacts,
  .signal-connections {

    min-width:0;
    overflow-wrap:anywhere;

  }

}