/* Base */
:root { --fg:#E6E9EB; --bg:#0B1215; --muted:#b3b3b3; --link:#6FA8DC; }

html,body{height:100%}

/* Page layout + typography */
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;

  background:var(--bg);
  color:var(--fg);
  font-family: Verdana, Geneva, sans-serif;
  line-height:1.7;
  max-width:70ch;
  margin:2rem auto;
  padding:0 1rem;

  position:relative; z-index:0; /* for background layer */
}
main{ flex:1; } /* pushes footer to the bottom */

/* Background layer (soft vignette + glow) */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(120vmax 80vmax at 50% -10%, rgba(111,168,220,.20), transparent 60%),
    radial-gradient(90vmax 60vmax at 50% 120%, rgba(111,168,220,.08), transparent 60%),
    radial-gradient(100vmax 100vmax at 120% 10%, rgba(0,0,0,.55), transparent 40%),
    radial-gradient(100vmax 100vmax at -20% 110%, rgba(0,0,0,.55), transparent 40%),
    var(--bg);
  background-blend-mode: screen, screen, normal, normal, normal;
}

/* Nav + footer */
header nav{margin-bottom:2rem}
footer{ margin-top:2rem; padding-top:.75rem; border-top:1px solid rgba(230,233,235,.15); }

/* Typography & links */
a{color:var(--link); text-decoration:underline}
a:visited{color:#a7d4ff}
h1,h2,h3{line-height:1.2; margin:1.2em 0 .4em}
small{color:var(--muted)}

/* ---------- Forms (generic) ---------- */
form { margin: 1rem 0; }
label{font-size:.9rem;color:var(--muted)}
input[type="email"]{
  display:block;
  padding:.6rem .7rem;
  width:100%;
  max-width:26rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.4rem;
  background:#0f1a21;
  color:var(--fg);
}
button{
  padding:.55rem 1rem;
  margin-top:.6rem;
  border:1px solid rgba(255,255,255,.18);
  border-radius:.45rem;
  background:rgba(111,168,220,.12);
  color:var(--fg);
  cursor:pointer;
}
button:focus,
button:hover {
  outline: 2px dashed var(--link);
  outline-offset: 2px;
}

/* Media elements */
audio,iframe{width:100%; background:#111; border:0}

/* Accessibility */
:focus{outline:2px dashed var(--link); outline-offset:2px}
::selection{background:#1b4e72;color:#fff}

/* ---------- Grain overlay (SVG filter) ---------- */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  filter:url(#grain);
  opacity:.06;              /* verify by bumping to .12 if needed */
  background:rgba(255,255,255,.001);
  mix-blend-mode:soft-light;
}
@media (prefers-reduced-motion: reduce){ .grain{ opacity:.03 } }

/* ---------- Subscribe page enhancements ---------- */
.subscribe-wrap{
  margin-top:1rem;
  display:grid;
  place-items:start;
}

.blob-callout{
  --w: min(40rem, 95vw);
  width: var(--w);
  position:relative;
  padding:1.25rem 1.25rem 1.1rem;
  margin:1.2rem 0 2.2rem;

  color:var(--fg);
  border-radius:24px; /* fallback if clip-path unsupported */

  /* soft glassy background + lighting */
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(111,168,220,.18), transparent 60%),
    radial-gradient(120% 120% at 90% 100%, rgba(111,168,220,.10), transparent 55%),
    rgba(255,255,255,.03);
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 10px 30px rgba(0,0,0,.25);

  /* smoother organic shape (works widely) */
  clip-path: path("M30 8 C 120 -12, 250 18, 300 80 C 350 140, 320 210, 220 238 C 120 266, 30 230, 10 160 C -8 100, -6 32, 30 8 Z");
}

/* Title inside blob */
.blob-title{ margin:0 0 .6rem; line-height:1.15; }

/* Make form elements fill the blob width nicely */
.blob-callout form{ margin: .4rem 0 0; }
.blob-callout input[type="email"]{ max-width:100% }
.blob-callout button{ margin-top:.65rem }

/* Smaller screens: slightly tighter blob */
@media (max-width:520px){
  .blob-callout{
    padding:1rem 1rem .9rem;
    clip-path: path("M22 6 C 90 -10, 195 12, 230 60 C 265 108, 242 162, 166 182 C 92 202, 28 176, 12 126 C 0 84, 0 28, 22 6 Z");
  }
}
/* --- FIX: keep subscribe blob glow contained --- */
.blob-callout{
  position: relative;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
}
.blob-callout::before,
.blob-callout::after{
  pointer-events: none;
}
/* --- PATCH: contain the subscribe blob + avoid Firefox backdrop-filter artifacts --- */
.blob-callout{
  overflow:hidden;
  isolation:isolate;
}

/* Firefox-specific: backdrop-filter can create a big “lens” effect */
@supports (-moz-appearance: none){
  .blob-callout{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
}