/* ============================================================
   sitekit — base: reset, typography, layout primitives
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  background-image: var(--glow);
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16.5px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition), color var(--transition);
}

::selection { background: var(--trim); color: var(--bg); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--head); outline-offset: 3px; border-radius: 4px; }

/* a11y skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--btn1-bg); color: var(--btn1-fg);
  font-weight: 700; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 20;
}
.skip:focus { left: 0; }

.wrap { width: 100%; max-width: 920px; margin: 0 auto; padding: 0 22px; }
.mono { font-family: var(--font-mono); }

main { flex: 1; }
section { padding: 46px 0 0; }

/* section label — the "// 01 ·" voice */
.sec-label {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--head); display: flex; align-items: center; gap: 12px; margin: 0 0 22px;
  transition: color var(--transition);
}
.sec-label::after { content: ""; flex: 1; height: 1px; background: var(--trim); transition: background-color var(--transition); }

@media (max-width: 560px) {
  body { font-size: 16px; }
}