/* DsNetwork — site and brand stylesheet.
   Tokens below are the brand palette and type scale documented in /brand/. */

:root {
  /* Ink — structure, text, dark surfaces */
  --ink-900: #0E1424;
  --ink-800: #1A2236;
  --ink-700: #2A3450;
  --graphite: #4A5368;
  --steel: #7C859A;
  --haze: #B9C0CF;
  --line: #DCE0E8;
  --mist: #F1F3F7;
  --paper: #FFFFFF;
  /* Signal — the single brand accent */
  --signal-500: #FF5F1F;
  --signal-600: #E54E10;
  --signal-700: #B53C0A;
  --signal-100: #FFE8DD;
  /* Cobalt — data, exchanges, secondary information */
  --cobalt-300: #8FA6F2;
  --cobalt-500: #3D63E0;
  --cobalt-700: #2945A8;
  --cobalt-100: #E3EAFD;
  /* Status — only for state, never decoration */
  --valid: #17804A;
  --valid-on-dark: #5BD08F;
  --warn: #94600A;
  --error: #C42B2B;

  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(14, 20, 36, .06), 0 8px 24px rgba(14, 20, 36, .08);
  --container: 1120px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-900);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal-700); text-underline-offset: .18em; }
a:hover { color: var(--ink-900); }
:focus-visible { outline: 3px solid var(--cobalt-500); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.75rem, 7vw, 4.75rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--font-mono); font-size: .9em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(4rem, 8vw, 6.5rem) 0; }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink-900); color: var(--paper); }
.section-head { max-width: 46rem; margin-bottom: 2.75rem; }
.section-head p { color: var(--graphite); font-size: 1.125rem; }
.section--ink .section-head p { color: var(--haze); }
.eyebrow {
  display: inline-block; font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--signal-700); margin-bottom: .9rem;
}
.section--ink .eyebrow, .hero .eyebrow { color: var(--signal-500); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.3rem;
  border-radius: 999px; border: 2px solid transparent; font-family: var(--font-text);
  font-weight: 600; font-size: 1rem; text-decoration: none; line-height: 1; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn-primary { background: var(--signal-500); color: var(--ink-900); }
.btn-primary:hover { background: var(--signal-600); color: var(--ink-900); }
.btn-outline { border-color: var(--ink-900); color: var(--ink-900); }
.btn-outline:hover { background: var(--ink-900); color: var(--paper); }
.btn-ghost { border-color: rgba(255, 255, 255, .45); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, .08); color: var(--paper); }
.btn-sm { padding: .55rem 1rem; font-size: .9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.chip {
  display: inline-block; font-family: var(--font-mono); font-size: .78rem; font-weight: 600;
  padding: .18rem .5rem; border-radius: 6px; background: var(--mist); color: var(--ink-800);
  white-space: nowrap; vertical-align: .1em;
}
.chip--signal { background: var(--signal-100); color: var(--signal-700); }
.chip--cobalt { background: var(--cobalt-100); color: var(--cobalt-700); }
.chip--valid { background: #DFF3E8; color: var(--valid); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: var(--ink-900); color: var(--paper);
  border-bottom: 1px solid rgba(255, 255, 255, .08); transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: .65rem; color: var(--paper); text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; }
.brand-as { font-family: var(--font-mono); font-size: .78rem; color: var(--haze); margin-left: .15rem; }
.nav { display: flex; gap: 1.6rem; }
.nav a { color: var(--haze); text-decoration: none; font-weight: 500; font-size: .95rem; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--paper); }
.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255, 255, 255, .3); color: var(--paper);
  border-radius: var(--radius-sm); padding: .45rem .7rem; font: 600 .9rem var(--font-text); cursor: pointer;
}
@media (max-width: 820px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; gap: 0;
    background: var(--ink-900); padding: .5rem var(--gutter) 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .7rem 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--ink-900); color: var(--paper);
  padding: clamp(4.5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(185, 192, 207, .22) 1px, transparent 1.2px);
  background-size: 26px 26px;
  mask-image: linear-gradient(110deg, transparent 30%, #000 75%);
  -webkit-mask-image: linear-gradient(110deg, transparent 30%, #000 75%);
}
.hero .container { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; }
.hero h1 { margin-bottom: .2em; }
.hero h1 .accent { color: var(--signal-500); }
.hero-lead { font-size: clamp(1.15rem, 2vw, 1.35rem); color: var(--haze); max-width: 34rem; margin-bottom: 2rem; }
.hero-art img { width: 100%; max-width: 440px; margin-left: auto; }
.hero-facts { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; margin-top: 2.5rem; font-family: var(--font-mono); font-size: .85rem; color: var(--haze); }
.hero-facts span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--signal-500); margin-right: .55rem; vertical-align: .12em; }
@media (max-width: 820px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-art { order: -1; }
  .hero-art img { max-width: 260px; margin: 0; }
}

/* ---------- Grid & cards ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; }
.card--accent { border-top: 4px solid var(--signal-500); }
.card h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.card .meta { color: var(--graphite); font-size: .95rem; margin-top: -.3rem; }
.card h4 { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin: 1.4rem 0 .5rem; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { padding: .42rem 0; border-bottom: 1px dashed var(--line); display: flex; justify-content: space-between; gap: 1rem; }
.list-plain li:last-child { border-bottom: 0; }
.list-plain .note { color: var(--graphite); font-size: .92rem; }

.stat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; }
.stat .num { display: block; font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1.1; color: var(--ink-900); }
.stat .num em { font-style: normal; color: var(--signal-600); }
.stat .lbl { color: var(--graphite); font-size: .92rem; }

.callout { display: flex; gap: .9rem; align-items: flex-start; margin-top: 1.75rem; padding: 1.1rem 1.3rem; border-radius: var(--radius); background: var(--ink-900); color: var(--haze); }
.callout strong { color: var(--paper); }
.callout svg { flex: none; margin-top: .2rem; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table.data { width: 100%; border-collapse: collapse; font-size: .97rem; }
table.data th { text-align: left; font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); padding: .95rem 1.1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data td code { color: var(--cobalt-700); }

.kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.kv div { padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.kv dt { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel); margin-bottom: .3rem; }
.kv dd { margin: 0; font-weight: 600; }
@media (max-width: 760px) { .kv { grid-template-columns: 1fr; } }

/* ---------- Network map (inline SVG) ---------- */
.netmap { width: 100%; height: auto; display: block; margin: 0 auto; }
.netmap--wide { max-width: 1040px; }
.netmap--tall { max-width: 420px; display: none; }
@media (max-width: 760px) { .netmap--wide { display: none; } .netmap--tall { display: block; } }
.netmap text { font-family: var(--font-text); fill: var(--ink-900); }
.netmap .t-name { font-size: 14px; font-weight: 600; }
.netmap .t-sub { font-size: 11.5px; fill: var(--graphite); }
.netmap .t-mono { font-family: var(--font-mono); font-size: 11px; fill: var(--graphite); }
.netmap .t-head { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; fill: var(--steel); }
.netmap .t-as { font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.netmap .t-node { font-family: var(--font-display); font-size: 17px; font-weight: 700; fill: var(--paper); }
.netmap .t-bb { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; fill: var(--signal-700); }
.netmap .t-valid { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--valid); }
.netmap .region { fill: var(--paper); stroke: var(--line); stroke-width: 2; }
.netmap .node { fill: var(--ink-900); stroke: var(--paper); stroke-width: 4; }
.netmap .box { fill: var(--paper); stroke-width: 1.5; }
.netmap .box-transit { stroke: var(--ink-900); }
.netmap .box-ix { stroke: var(--cobalt-500); }
.netmap .port-transit { fill: var(--paper); stroke: var(--ink-900); stroke-width: 2; }
.netmap .port-ix { fill: var(--paper); stroke: var(--cobalt-500); stroke-width: 2; }
.netmap .l-transit { stroke: var(--ink-700); stroke-width: 2; }
.netmap .l-ix { stroke: var(--cobalt-500); stroke-width: 2; stroke-dasharray: 6 5; }
.netmap .l-bb { stroke: var(--signal-500); stroke-width: 7; stroke-linecap: round; }
.netmap .pill { fill: var(--paper); stroke: var(--valid); stroke-width: 1.5; }
.netmap .pill-bb { fill: var(--paper); stroke: var(--signal-500); stroke-width: 1.5; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink-900); color: var(--haze); padding: 3.5rem 0 2rem; font-size: .95rem; }
.site-footer a { color: var(--paper); text-decoration: none; }
.site-footer a:hover { color: var(--signal-500); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
.footer-grid h4 { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: .9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .45rem; }
.footer-brand img { width: 150px; margin-bottom: 1rem; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--steel); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Brand guidelines page ---------- */
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.toc a { font-family: var(--font-mono); font-size: .82rem; color: var(--haze); text-decoration: none; padding: .35rem .7rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; }
.toc a:hover { color: var(--paper); border-color: var(--paper); }
.principle { padding: 1.4rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line); }
.principle .n { font-family: var(--font-mono); color: var(--signal-700); font-weight: 600; font-size: .85rem; }
.logo-tile { border-radius: var(--radius); padding: 2.2rem; display: flex; align-items: center; justify-content: center; min-height: 220px; border: 1px solid var(--line); }
.logo-tile img { max-height: 150px; width: auto; }
.logo-tile--ink { background: var(--ink-900); border-color: var(--ink-900); }
.logo-tile--mist { background: var(--mist); }
.logo-caption { font-size: .9rem; color: var(--graphite); margin-top: .6rem; }
.logo-caption strong { color: var(--ink-900); }
.clearspace { position: relative; display: inline-block; padding: 34px; background: repeating-linear-gradient(45deg, var(--signal-100) 0 8px, var(--paper) 8px 16px); border: 1px dashed var(--signal-600); border-radius: var(--radius-sm); }
.clearspace img { height: 130px; width: auto; background: var(--paper); }
.dont { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: var(--paper); min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; font-size: .9rem; color: var(--graphite); }
.dont::after { content: "✕"; position: absolute; top: .6rem; right: .8rem; color: var(--error); font-weight: 700; }
.dont img { height: 80px; width: auto; }
.swatch { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--paper); }
.swatch .chipcolor { height: 96px; display: flex; align-items: flex-end; padding: .7rem .9rem; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; }
.swatch .info { padding: .8rem .9rem; font-size: .88rem; }
.swatch .info strong { display: block; font-size: .98rem; }
.swatch .info span { display: block; font-family: var(--font-mono); font-size: .78rem; color: var(--graphite); }
.ratio-bar { display: flex; height: 54px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.ratio-bar div { display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: .78rem; font-weight: 600; }
.type-row { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: baseline; padding: 1.2rem 0; border-bottom: 1px solid var(--line); }
.type-row .spec { font-family: var(--font-mono); font-size: .78rem; color: var(--graphite); line-height: 1.5; }
@media (max-width: 640px) { .type-row { grid-template-columns: 1fr; gap: .4rem; } }
.specimen { font-size: 3.2rem; line-height: 1; letter-spacing: -.02em; margin-bottom: .6rem; overflow-wrap: anywhere; }
.do-dont { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.do-dont > div { border-radius: var(--radius); padding: 1.2rem 1.4rem; border: 1px solid var(--line); background: var(--paper); }
.do-dont .do { border-top: 4px solid var(--valid); }
.do-dont .dont-box { border-top: 4px solid var(--error); }
.do-dont ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.do-dont li { margin-bottom: .35rem; }
@media (max-width: 640px) { .do-dont { grid-template-columns: 1fr; } }
.legend-row { display: flex; align-items: center; gap: .9rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.legend-row:last-child { border-bottom: 0; }
.legend-row svg { flex: none; }

/* ---------- Small utilities ---------- */
.label { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin-bottom: .8rem; }
.callout p { margin: 0; }
.section--ink a:not(.btn) { color: var(--signal-500); }
.section--ink a:not(.btn):hover { color: var(--paper); }
.principle p:last-child { margin-bottom: 0; }