/* codeineconsumers.co — no JS, no external requests, no third parties. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg:        #07090c;
  --bg-lift:   #0e141b;
  --ink:       #e6edf5;
  --ink-soft:  #8fa3b8;
  --ink-dim:   #6b8099;   /* 4.9:1 on --bg; the footer email must stay readable */
  --accent:    #1e9cd7;
  --accent-hi: #7dd3fc;

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

html, body { height: 100%; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);

  /* Cold glow behind the mark, then a slate floor. Pure CSS, no assets. */
  background-image:
    radial-gradient(ellipse 80% 55% at 50% 38%, #16303f 0%, transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, var(--bg-lift) 0%, transparent 65%);
  background-repeat: no-repeat;
  /* No background-attachment:fixed - the page never scrolls, and it janks on iOS Safari. */
}

/* Fine grain + vignette. Inline data URI, so still zero network requests. */
.veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(ellipse 75% 75% at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: .5;
}

main {
  position: relative;
  z-index: 2;
  width: min(100%, 46rem);
  text-align: center;
}

/* — small mark above the wordmark — */
.mark {
  margin: 0 0 clamp(1.75rem, 5vw, 2.75rem);
  font-family: var(--mono);
  font-size: clamp(.7rem, 1.6vw, .8rem);
  letter-spacing: .42em;
  text-indent: .42em;          /* re-centre against the trailing letter-space */
  text-transform: uppercase;
  color: var(--ink-dim);
}
.mark span { color: var(--accent); }

/* — the wordmark — */
h1 {
  margin: 0;
  font-size: clamp(2.9rem, 13.5vw, 8.25rem);
  line-height: .92;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.line {
  display: block;
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%, var(--ink) 34%,
    var(--accent-hi) 50%,
    var(--ink) 66%, var(--ink) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 14s cubic-bezier(.5, 0, .5, 1) infinite;
}
.line:nth-child(2) { animation-delay: .45s; }

@keyframes sheen {
  0%, 55%, 100% { background-position: 100% 0; }
  22%           { background-position: 0 0; }
}

/* — tagline — */
.tagline {
  margin: clamp(1.6rem, 4.5vw, 2.4rem) 0 0;
  font-size: clamp(.95rem, 2.1vw, 1.15rem);
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
  text-wrap: balance;
}

/* — hairline divider — */
.rule {
  width: min(11rem, 45%);
  height: 1px;
  margin: clamp(2.4rem, 6vw, 3.5rem) auto clamp(1.5rem, 4vw, 2rem);
  border: 0;
  background-image: linear-gradient(90deg, transparent, var(--ink-dim) 28%, var(--accent) 50%, var(--ink-dim) 72%, transparent);
  opacity: .75;
}

/* — footer — */
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem clamp(1.25rem, 4vw, 2.25rem);
  font-family: var(--mono);
  font-size: clamp(.66rem, 1.5vw, .76rem);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.node { color: var(--ink-dim); }

/* Not a link - see the note in index.html. One click selects the whole address. */
.contact {
  color: var(--ink-soft);
  cursor: text;
  user-select: all;
  -webkit-user-select: all;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .25s ease, border-color .25s ease;
}
.contact:hover,
.contact:focus-visible { color: var(--accent-hi); border-bottom-color: var(--accent); }

.dim { color: var(--ink-dim); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* — motion & contrast preferences — */
@media (prefers-reduced-motion: reduce) {
  .line {
    animation: none;
    background-image: none;
    color: var(--ink);
    -webkit-text-fill-color: var(--ink);
  }
  * { transition-duration: .01ms !important; }
}

@media (prefers-contrast: more) {
  :root { --ink-soft: #cddced; --ink-dim: #8ba1b8; }
  .veil { opacity: .25; }
}

/* Short landscape phones: stop the wordmark eating the viewport. */
@media (max-height: 30rem) and (orientation: landscape) {
  h1 { font-size: clamp(2.2rem, 8vh, 3.5rem); }
  .mark { margin-bottom: 1rem; }
  .rule { margin: 1.25rem auto 1rem; }
}