/* wiresage.dev: plain CSS, no build step.

   Class names are short on purpose; the page is small.
     .sec section        .rail left column       .body right column
     .fm  front matter   .kick eyebrow           .abs  abstract
     .sc  small caps     .kw   keywords          .cap  caption
     .ctas button row    .btn  button (.g ghost)
     .fig diagram        .node box (.hl highlighted)   .link connector
     .mono code text     .reg  regular weight    .spec stacked spec list
     .probs open problems   .meth method grid   .steps numbered steps
*/

/* ── Tokens ─────────────────────────────────────────────── */

:root {
  --ivory: #faf9f5; /* page */
  --paper: #f3f0e7; /* raised surface */
  --ink: #141413;   /* text, strong rules */
  --ink2: #3d3d3a;  /* secondary text */
  --mute: #6b6a64;  /* tertiary text */
  --rule: #e2ded3;  /* hairlines */
  --clay: #c15f3c;  /* accent */
  --clayt: #b0532f; /* accent for text and links (contrast-safe) */
  --clay2: #d97757; /* accent, light */

  --sans: Outfit, system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

/* ── Base ───────────────────────────────────────────────── */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font: 400 18px/1.62 var(--serif);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--clayt);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}

p {
  margin: 0;
  text-wrap: pretty;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ── Header ─────────────────────────────────────────────── */

header {
  border-bottom: 1px solid var(--rule);
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 72px;
}

.bar img {
  height: 30px;
  display: block;
}

nav {
  display: flex;
  gap: 28px;
  font: 500 15px var(--sans);
}

nav a {
  color: var(--ink2);
  text-decoration: none;
}

nav a:hover {
  color: var(--clayt);
}

/* ── Sections: narrow rail + body ───────────────────────── */

.sec {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 72px);
  padding: 72px 0;
  border-top: 1px solid var(--rule);
}

.sec:first-of-type {
  border-top: 0;
}

.rail {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.num {
  font: 500 13px var(--mono);
  color: var(--clayt);
  letter-spacing: 0.04em;
}

.rail h2 {
  font: 600 24px/1.2 var(--sans);
  letter-spacing: -0.01em;
  margin: 0;
}

.note {
  font: 400 12.5px/1.6 var(--mono);
  color: var(--mute);
  margin-top: 10px;
}

.body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
  max-width: 760px;
}

.body.wide {
  max-width: none;
}

.fm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font: 400 12.5px/1.5 var(--mono);
  color: var(--mute);
  margin: 0;
}

.fm dt {
  color: var(--ink2);
}

.fm dd {
  margin: 0;
}

/* ── Hero type ──────────────────────────────────────────── */

.kick {
  font: 500 13px var(--mono);
  color: var(--clayt);
  letter-spacing: 0.04em;
}

h1 {
  font: 600 clamp(40px, 6vw, 76px)/1.02 var(--sans);
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}

.abs {
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink2);
  max-width: 760px;
}

.sc {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink);
}

.kw {
  font: 400 13px var(--mono);
  color: var(--mute);
}

/* ── Buttons ────────────────────────────────────────────── */

.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 15px var(--sans);
  padding: 12px 18px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--ink);
  color: var(--ivory);
  border: 1px solid var(--ink);
}

.btn:hover {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--ivory);
}

.btn.g {
  background: transparent;
  color: var(--ink);
}

.btn.g:hover {
  background: var(--ink);
  color: var(--ivory);
  border-color: var(--ink);
}

/* ── Fig. 1: client → server → device ───────────────────── */

figure {
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fig {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: clamp(20px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, 0.7fr) minmax(0, 1fr) minmax(90px, 0.7fr) minmax(0, 1fr);
  align-items: center;
}

.node {
  background: var(--ivory);
  border: 1px solid #cfc9bb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.node.hl {
  border: 1.5px solid var(--clay);
  box-shadow: 0 0 0 4px rgba(193, 95, 60, 0.1);
}

.node b {
  font: 600 16px/1.25 var(--sans);
}

.node span {
  font: 400 12px/1.5 var(--mono);
  color: var(--mute);
}

.node i {
  font: 500 11px var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--clayt);
}

.link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  min-width: 0;
}

.link .ln {
  position: relative;
  width: 100%;
  height: 1.5px;
  background: var(--ink);
}

.link .ln::before,
.link .ln::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
  transform: translateY(-50%);
}

.link .ln::before {
  left: -3px;
}

.link .ln::after {
  right: -3px;
}

.link span {
  font: 400 11.5px/1.35 var(--mono);
  color: var(--ink2);
  text-align: center;
}

.link small {
  font: 400 11px/1.35 var(--mono);
  color: var(--mute);
  text-align: center;
}

figcaption,
.cap {
  font: italic 400 15.5px/1.55 var(--serif);
  color: var(--ink2);
}

figcaption b,
.cap b {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* ── Table 1 ────────────────────────────────────────────── */

.tblwrap {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  border-top: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
}

th {
  font: 500 12px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: left;
  padding: 12px 14px 10px 0;
  border-bottom: 1px solid var(--ink);
}

td {
  padding: 16px 14px 16px 0;
  vertical-align: top;
  line-height: 1.5;
}

.mono {
  font: 500 14px var(--mono);
  white-space: nowrap;
}

.mono.reg {
  font-weight: 400;
}

.spec {
  display: flex;
  flex-direction: column;
  font: 400 13px var(--mono);
}

.spec span {
  white-space: nowrap;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--mono);
  color: var(--ink);
}

.tag::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--clay2);
}

/* ── §2 mikrotik-mcp: description beside a code sample ──── */

.case {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 32px;
  align-items: start;
  margin-top: 20px;
}

.case-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.case-text p {
  font-size: 17px;
  color: var(--ink2);
}

h3 {
  font: 600 20px/1.3 var(--sans);
  margin: 0;
  letter-spacing: -0.005em;
}

h3.spaced {
  margin-top: 28px;
}

h3 .n {
  font: 500 13px var(--mono);
  color: var(--clayt);
  margin-right: 10px;
  letter-spacing: 0.04em;
}

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  margin: 0;
  font-size: 16px;
}

.facts dt {
  font: 500 12.5px/1.9 var(--mono);
  color: var(--mute);
}

.facts dd {
  margin: 0;
}

pre {
  margin: 0;
  background: var(--ink);
  color: #e8e6dc;
  font: 400 13.5px/1.75 var(--mono);
  padding: 22px 24px;
  border-radius: 8px;
  overflow-x: auto;
}

pre .c { color: #8d8b82; }       /* comment */
pre .p { color: var(--clay2); }  /* prompt */
pre .k { color: #f0d2bd; }       /* flag */

/* ── Open problems, method, steps ───────────────────────── */

.probs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
}

.probs li {
  padding: 18px 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.probs li span {
  font: 500 12px var(--mono);
  color: var(--clayt);
  letter-spacing: 0.04em;
}

.probs li b {
  font: 600 17px/1.3 var(--sans);
}

.probs li p {
  font-size: 16.5px;
  color: var(--ink2);
}

.meth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 40px;
}

.meth div {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meth p {
  font-size: 17px;
  color: var(--ink2);
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  display: flex;
  flex-direction: column;
}

.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}

.steps li::before {
  content: counter(s, decimal-leading-zero);
  font: 500 13px/1.9 var(--mono);
  color: var(--clayt);
}

.steps li:last-child {
  border-bottom: 1px solid var(--rule);
}

.steps b {
  font: 600 17px var(--sans);
  display: block;
  margin-bottom: 2px;
}

.steps p {
  font-size: 17px;
  color: var(--ink2);
}

/* ── Footer ─────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: 40px 0 56px;
}

.foot {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto;
  gap: clamp(24px, 5vw, 72px);
  align-items: start;
}

.foot img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: block;
}

.foot p {
  font-size: 15px;
  color: var(--ink2);
  max-width: 560px;
}

.foot .fl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 14px var(--sans);
}

.foot .fl a {
  color: var(--ink2);
  text-decoration: none;
}

.foot .fl a:hover {
  color: var(--clayt);
}

.foot small {
  display: block;
  margin-top: 12px;
  font: 400 12.5px var(--mono);
  color: var(--mute);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 1180px) {
  .case {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .sec {
    grid-template-columns: 1fr;
    padding: 56px 0;
  }

  .probs,
  .meth,
  .foot {
    grid-template-columns: 1fr;
  }

  /* Fig. 1 stacks vertically and the connectors turn 90° */
  .fig {
    grid-template-columns: 1fr;
  }

  .link {
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0 10px 16px;
    gap: 14px;
  }

  .link .ln {
    width: 1.5px;
    height: 44px;
    flex: none;
  }

  .link .ln::before {
    left: 50%;
    top: -3px;
    transform: translateX(-50%);
  }

  .link .ln::after {
    left: 50%;
    right: auto;
    top: auto;
    bottom: -3px;
    transform: translateX(-50%);
  }

  .link span,
  .link small {
    text-align: left;
  }
}

@media (max-width: 640px) {
  nav a:not(.gh) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}