/* dorklogic.com -- placeholder page.
   Vanilla CSS, no framework, no external fonts, no external assets.
   Deliberately dark-only: this is a stated aesthetic, not a missing light mode,
   so every colour is declared outright rather than inherited from the UA. */

:root {
  --bg:        #0a0c10;
  --bg-lift:   #0f1218;
  --ink:       #d8dee9;
  --ink-dim:   #8b95a5;
  --ink-faint: #5a6473;
  --cyan:      #4fd1e0;
  --amber:     #e0a55f;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
          sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 1.5rem 0;
  position: relative;
  overflow-x: hidden;
}

/* Background: a fine grid plus a radial lift behind the type. Two gradients,
   no images, no requests. Pinned to the viewport so it never scrolls. */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% 38%, var(--bg-lift) 0%, transparent 70%),
    linear-gradient(to right,  rgba(255,255,255,0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.028) 1px, transparent 1px);
  background-size: 100% 100%, 3rem 3rem, 3rem 3rem;
  mask-image: radial-gradient(70rem 50rem at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(70rem 50rem at 50% 40%, #000 30%, transparent 85%);
}

/* The generated circuit layer. Sits in the same stacking level as .field but
   later in the document, so it paints on top of the grid and under the type.
   The grid stays as the base layer on purpose: without JS the page still has a
   deliberate background rather than a flat void. Never interactive -- the
   pointer field is driven from window events, so this element must not eat
   clicks or selection. */
.circuit {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: auto;
}

.mark h1 {
  font-family: var(--mono);
  font-size: clamp(2.1rem, 9vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  color: #f2f5f9;
}

/* The caret is decoration, not content -- generated so it never lands in a
   copy/paste or a screen reader. */
.mark h1::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.09em;
  margin-left: 0.28em;
  vertical-align: 0.08em;
  background: var(--cyan);
  animation: blink 1.6s steps(1, end) infinite;
}

.host {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.75rem 0 0;
}

.rule {
  border: 0;
  height: 1px;
  margin: 2rem 0;
  background: linear-gradient(to right,
              var(--cyan) 0%, rgba(79,209,224,0.25) 18%,
              rgba(255,255,255,0.10) 55%, transparent 100%);
}

.body p {
  margin: 0 0 1rem;
  max-width: 32rem;
}

.lede {
  font-size: 1.125rem;
  color: #e6ebf2;
}

.muted {
  color: var(--ink-dim);
  font-size: 0.9375rem;
}

.muted::before {
  content: "";
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--amber);
  margin-right: 0.55rem;
  vertical-align: 0.08em;
}

a {
  color: var(--cyan);
  text-decoration-color: rgba(79, 209, 224, 0.4);
  text-underline-offset: 0.2em;
}

a:hover,
a:focus-visible {
  text-decoration-color: var(--cyan);
}

.foot {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 3rem 0 2rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-align: center;
}

@keyframes blink {
  0%, 55%  { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mark h1::after { animation: none; opacity: 1; }
}

@media (max-width: 30rem) {
  body { padding-top: 2rem; }
  .rule { margin: 1.5rem 0; }
}