/* ================================================================
   ECHELON TLSM shared styles
   Theme tokens, page-wide primitives, and shared components.
   ================================================================ */

:root {
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --paper: #f5f5f2;
  --paper-pure: #ffffff;
  --rule: #deded8;
  --accent: #720016;
  --mute: #6a6a65;

  --body-bg: var(--paper-pure);
  --body-fg: var(--ink);
  --grain-opacity: .028;
  --grain-blend: multiply;
  --nav-bg: rgba(255,255,255,.92);
  --nav-rule: var(--rule);
  --nav-fg: var(--ink);
  --nav-muted: var(--mute);

  --f: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --wd: "wdth" 110;
  --wb: "wdth" 110;
  --edge: clamp(1.25rem, 4vw, 3.5rem);
  --gap: clamp(.75rem, 1.5vw, 1.5rem);
  --nav: 68px;
}

body.theme-light {
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --paper: #f5f5f2;
  --paper-pure: #ffffff;
  --rule: #deded8;
  --accent: #720016;
  --mute: #6a6a65;
  --body-bg: var(--paper-pure);
  --body-fg: var(--ink);
  --grain-opacity: .028;
  --grain-blend: multiply;
  --nav-bg: rgba(255,255,255,.92);
  --nav-rule: var(--rule);
  --nav-fg: var(--ink);
  --nav-muted: var(--mute);
}

body.theme-dark {
  --ink: #0a0a0a;
  --ink-soft: rgba(255,255,255,.4);
  --paper: #ffffff;
  --paper-pure: #0a0a0a;
  --rule: rgba(255,255,255,.08);
  --accent: #890021;
  --mute: rgba(255,255,255,.35);
  --body-bg: var(--ink);
  --body-fg: var(--paper);
  --grain-opacity: .04;
  --grain-blend: screen;
  --nav-bg: rgba(10,10,10,.9);
  --nav-rule: rgba(255,255,255,.08);
  --nav-fg: #ffffff;
  --nav-muted: rgba(255,255,255,.35);
}

body.page-works {
  --gap: 2px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--body-bg);
  color: var(--body-fg);
  font-family: var(--f);
  font-variation-settings: var(--wb);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
::selection { background: var(--accent); color: #fff; }
a { color: inherit; text-decoration: none; }

body.menu-open > nav { opacity: 0; visibility: hidden; pointer-events: none; }

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--nav);
  padding: 0 var(--edge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--nav-rule);
  transition: opacity .15s ease, visibility .15s ease;
}
.nav-brand { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; z-index: 1; }
.nav-mark { width: 25px; height: 25px; flex-shrink: 0; }
.nav-mark svg { display: block; width: 100%; height: 100%; }
.nav-mark rect { fill: var(--accent); }
.nav-wordmark {
  font-family: var(--f);
  font-variation-settings: var(--wd);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--nav-fg);
}
.nav-wordmark sup {
  font-family: var(--mono);
  font-size: 8.3px;
  color: var(--accent);
  letter-spacing: .12em;
  position: relative;
  top: -.4em;
  margin-left: .2rem;
}
.nav-links {
  list-style: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  gap: clamp(1.25rem,2.5vw,2.5rem);
}
.nav-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nav-muted);
  transition: color .2s;
}
.nav-links a:hover { color: var(--nav-fg); }
.nav-meta {
  flex-shrink: 0;
  z-index: 1;
  text-align: right;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--nav-muted);
  line-height: 1.7;
}
.nav-meta .live::before {
  content: "●";
  color: var(--accent);
  margin-right: .35rem;
  animation: blink 2s infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.mob-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid transparent;
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--nav-fg);
  z-index: 300;
}
.mob-plus {
  position: relative;
  width: 20px;
  height: 20px;
  display: block;
  color: currentColor;
  font-size: 0;
}
.mob-plus::before,
.mob-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), background .2s;
}
.mob-plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.mob-toggle:hover { color: var(--accent); }
.mob-toggle.open .mob-plus::before { transform: translate(-50%, -50%) rotate(45deg); }
.mob-toggle.open .mob-plus::after { transform: translate(-50%, -50%) rotate(135deg); }

.mob-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity .28s ease, visibility .28s ease, transform .42s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.mob-menu.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.mob-menu::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .075;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.mob-menu-bar,
.mob-menu-body,
.mob-menu-foot { position: relative; z-index: 1; }
.mob-menu-bar {
  height: var(--nav);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--edge);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.mob-menu-brand { display: flex; align-items: center; gap: .55rem; }
.mob-menu-brand svg { width: 25px; height: 25px; }
.mob-menu-brand svg rect { fill: var(--accent); }
.mob-brand-wordmark {
  font-family: var(--f);
  font-variation-settings: var(--wd);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.mob-brand-wordmark sup {
  font-family: var(--mono);
  font-size: 7.5px;
  color: rgba(255,255,255,.45);
  letter-spacing: .12em;
  position: relative;
  top: -.4em;
  margin-left: .2rem;
}
.mob-close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: color .2s;
}
.mob-close span { position: absolute; width: 18px; height: 1px; background: currentColor; }
.mob-close span:first-child { transform: rotate(45deg); }
.mob-close span:last-child { transform: rotate(-45deg); }
.mob-close:hover { color: var(--accent); }
.mob-menu-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(0,2fr);
  gap: var(--gap);
  align-items: center;
  padding: clamp(2rem,5vw,5rem) var(--edge);
}
.mob-kicker {
  align-self: start;
  border-top: 1px solid rgba(255,255,255,.42);
  padding-top: .9rem;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  line-height: 1.85;
}
.mob-kicker span { display: block; }
.mob-kicker span:first-child { color: #fff; margin-bottom: .25rem; }
.mob-nav { width: 100%; border-top: 1px solid rgba(255,255,255,.2); }
.mob-nav-item {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: var(--gap);
  align-items: baseline;
  padding: clamp(.425rem,1.25vw,.675rem) 0;
  border-bottom: 1px solid rgba(255,255,255,.14);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .42s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.2,.8,.2,1), color .18s;
}
.mob-menu.open .mob-nav-item:nth-child(1) { opacity: 1; transform: none; transition-delay: .05s; }
.mob-menu.open .mob-nav-item:nth-child(2) { opacity: 1; transform: none; transition-delay: .09s; }
.mob-menu.open .mob-nav-item:nth-child(3) { opacity: 1; transform: none; transition-delay: .13s; }
.mob-menu.open .mob-nav-item:nth-child(4) { opacity: 1; transform: none; transition-delay: .17s; }
.mob-menu.open .mob-nav-item:nth-child(5) { opacity: 1; transform: none; transition-delay: .21s; }
.mob-menu.open .mob-nav-item:nth-child(6) { opacity: 1; transform: none; transition-delay: .25s; }
.mob-n,
.mob-arr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.32);
  transition: color .18s, transform .18s;
}
.mob-label {
  font-family: var(--f);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(1.125rem,4.5vw,3.1rem);
  line-height: .86;
  letter-spacing: -.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.86);
  transition: color .18s, transform .18s;
}
.mob-nav-item:hover .mob-label,
.mob-nav-item:focus-visible .mob-label { color: var(--accent); transform: translateX(.25rem); }
.mob-nav-item:hover .mob-n,
.mob-nav-item:hover .mob-arr,
.mob-nav-item:focus-visible .mob-n,
.mob-nav-item:focus-visible .mob-arr { color: var(--accent); }
.mob-nav-item:hover .mob-arr,
.mob-nav-item:focus-visible .mob-arr { transform: translate(.12rem,-.12rem); }
.mob-menu-foot {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--gap);
  align-items: center;
  padding: .9rem var(--edge);
  border-top: 1px solid rgba(255,255,255,.14);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.mob-menu-foot span:nth-child(2) { text-align: center; color: rgba(255,255,255,.6); }
.mob-menu-foot span:last-child { text-align: right; }

@media (max-width: 960px) {
  .mob-toggle { display: flex; }
  .nav-links,
  .nav-meta { display: none; }
}
@media (max-width: 640px) {
  .mob-menu-body {
    grid-template-columns: 1fr;
    align-content: center;
    padding-top: clamp(1.5rem,6vw,3rem);
    padding-bottom: clamp(1.5rem,6vw,3rem);
  }
  .mob-kicker { align-self: auto; }
  .mob-nav-item { grid-template-columns: 34px 1fr auto; }
  .mob-label { font-size: clamp(1.075rem,7vw,2.2rem); }
  .mob-menu-foot { grid-template-columns: 1fr; gap: .25rem; }
  .mob-menu-foot span,
  .mob-menu-foot span:nth-child(2),
  .mob-menu-foot span:last-child { text-align: left; }
}
@media (min-width: 961px) {
  .mob-menu { display: none !important; }
  .mob-toggle { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mob-menu,
  .mob-nav-item,
  .mob-label,
  .mob-arr,
  .mob-plus::before,
  .mob-plus::after { transition: none !important; }
}