/* ======================================================================
   Isolation Sessions — Neon Noir Theme
   Usage: link this file or paste into your site's custom CSS.
   Designed to mimic the screenshot: bright neon green on deep black,
   bold uppercase headings with glow, clean readable body text.
   ====================================================================== */

:root{
  --bg: #000000;
  --text: #b9ffca;         /* softer green for long-form body text */
  --neon: #39FF14;         /* headline neon */
  --neon-alt: #00e676;     /* accents */
  --muted: #1a1a1a;        /* cards / code / sidebar */
  --rule: #0a4d1f;
  --link: #57ffa1;
  --maxw: 72rem;
  --leading: 1.7;
  --tracking: 0.02em;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-display: "League Spartan", "Oswald", "Archivo Black", Impact, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Global */

html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: var(--leading);
  letter-spacing: var(--tracking);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.container{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 4rem 1.25rem 8rem;
}

/* Links */

a{
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid rgba(87,255,161,.35);
  transition: all .15s ease-out;
}
a:hover{
  color: var(--neon);
  border-bottom-color: rgba(57,255,20,.9);
  text-shadow: 0 0 .4rem var(--neon);
}

/* Headings — bold, uppercase, neon glow */

h1, h2, h3, h4{
  margin: 0 0 1.25rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-family: var(--font-display);
  color: var(--neon);
  text-shadow:
     0 0 .2rem rgba(57,255,20,.8),
     0 0 .6rem rgba(57,255,20,.6),
     0 0 1.2rem rgba(57,255,20,.4);
}

h1{
  font-size: clamp(2.2rem, 3.6vw + 1rem, 3.8rem);
  font-weight: 800;
  padding-top: .25rem;
  border-bottom: 2px solid var(--rule);
  padding-bottom: .85rem;
  margin-bottom: 2rem;
}

h2{
  font-size: clamp(1.6rem, 2.1vw + .8rem, 2.2rem);
  font-weight: 800;
}

h3{
  font-size: clamp(1.1rem, 1.2vw + .8rem, 1.4rem);
  color: #74ff8f;
}

/* Date / meta line */

.meta, .date{
  color: #6cff9b;
  font-family: var(--font-mono);
  font-size: .95rem;
  letter-spacing: .06em;
  margin: .35rem 0 2rem;
  text-transform: none;
}

/* Body copy */

p{
  margin: 0 0 1.25rem;
  font-size: clamp(1.05rem, .45vw + .95rem, 1.15rem);
}

.lead{
  color: var(--neon);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.35;
  letter-spacing: .01em;
  margin: 2rem 0 1.25rem;
}

/* Quotes */

blockquote{
  margin: 1.5rem 0;
  padding: .75rem 1rem .75rem 1.25rem;
  border-left: 3px solid var(--neon-alt);
  background: linear-gradient(90deg, rgba(0,230,118,.12), rgba(0,0,0,0));
  color: #d2ffe2;
}

/* Horizontal rule */

hr{
  border: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--rule), transparent);
  margin: 2.5rem 0;
}

/* Lists */

ul, ol{
  margin: 0 0 1.25rem 1.25rem;
  padding: 0;
}
li{ margin: .35rem 0; }

/* Inline code & pre */

code, kbd, samp{
  font-family: var(--font-mono);
  font-size: .92em;
  background: #0b0b0b;
  color: #c2ffd3;
  padding: .15rem .35rem;
  border: 1px solid #0e2c19;
  border-radius: .35rem;
}

pre{
  overflow-x: auto;
  padding: 1rem 1.25rem;
  border-radius: .75rem;
  background: #0a0a0a;
  border: 1px solid #0e2c19;
  box-shadow: inset 0 0 1.4rem rgba(57,255,20,.08);
}