/* Inter-section framing taken from the local cybersec.shmlkv.space source.
   Card content, typography and preview geometry stay in their component sheets. */
:root {
  --cyber-ground: #edefed;
  --cyber-frame: #e3e6e3;
  --cyber-mark: #aeb5b1;
  --cyber-muted: #545d59;
  --cyber-faint: #6e7672;
  --cyber-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --cyber-gap: 10px;
}
:root[data-theme="dark"] {
  --cyber-ground: #050607;
  --cyber-frame: #0a0c0d;
  --cyber-mark: #2b3033;
  --cyber-muted: #9fa7a3;
  --cyber-faint: #7a827e;
}
body { background-color: var(--cyber-ground); }
#main-content { gap: 18px; }
#main-content > .frame {
  position: relative;
  padding: 10px;
  background-color: var(--cyber-frame);
  background-image:
    linear-gradient(var(--cyber-mark), var(--cyber-mark)), linear-gradient(var(--cyber-mark), var(--cyber-mark)),
    linear-gradient(var(--cyber-mark), var(--cyber-mark)), linear-gradient(var(--cyber-mark), var(--cyber-mark)),
    linear-gradient(var(--cyber-mark), var(--cyber-mark)), linear-gradient(var(--cyber-mark), var(--cyber-mark)),
    linear-gradient(var(--cyber-mark), var(--cyber-mark)), linear-gradient(var(--cyber-mark), var(--cyber-mark));
  background-repeat: no-repeat;
  background-size: 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}
#main-content > .frame > .grid,
.page .reference-projects.bento,
.page .hero-side,
.page .hero-side .top-right { gap: var(--cyber-gap); }
#main-content > .frame .section-lead,
#main-content > #method .section-lead { padding: 10px 24px 12px; }
#main-content > .section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 10px;
  font-family: var(--cyber-mono);
  font-size: 11px;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cyber-faint);
}
#main-content > .section-divider::before,
#main-content > .section-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cyber-mark) 12%, var(--cyber-mark) 88%, transparent);
}
#main-content > .section-divider > span { display: inline-flex; align-items: center; gap: 10px; }
#main-content > .section-divider b { color: var(--cyber-muted); font-weight: 500; }
@media (max-width: 760px) {
  :root { --cyber-gap: 6px; }
  #main-content > .frame { padding: 6px; }
}