/* eg build v009 */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:#cfcfcf;
  --accent:#fff;
  --border:#fff;
  --max:1100px;

  /* Title + outline */
  --title-size:min(11vw,96px);
  --title-gap:0.2rem;

  /* Dash pattern */
  --outline-dash:12;
  --outline-gap:10;

  /* Stroke widths (inner/top halo) */
  --outline-stroke-outer:3px;
  --outline-stroke-mid:2.2px;
  --outline-stroke-inner:1.4px;

  /* Stroke widths (outer/bottom halo) – slightly beefier for separation */
  --outline2-stroke-outer:3.4px;
  --outline2-stroke-mid:2.6px;
  --outline2-stroke-inner:1.6px;

  /* GLOBAL outline-only drop (kept at 7px total) */
  --outline-global-nudge:7px;

  /* Halo scales */
  --outline-scale:1.04;   /* inner/top halo (original) */
  --outline-scale-2:1.14; /* outer/bottom halo (Option B ~ +10%) */

  /* Per-line nudges (kept) */
  --nudge-line-0:0px; /* THE MANY */
  --nudge-line-1:2px; /* RAMBLINGS */
  --nudge-line-2:0px; /* OF ELWOOD */
  --nudge-line-3:0px; /* GROG */
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;
}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:6vh 16px 10vh;
}

/* DASHED FRAME AROUND MAIN BOX */
.marquee-box{
  position:relative;
  border:2px dashed var(--border);
  padding:2rem 1rem 1.5rem;
  margin:0 8px;
  text-align:center;
}
.marquee-box:before,
.marquee-box:after{
  content:"";
  position:absolute;
  left:-10px; top:-10px; right:-10px; bottom:-10px;
  border:2px dashed var(--border);
  opacity:0.65;
  pointer-events:none;
}

/* STACKED RETRO HEADLINE — white bands with black slits */
.stacked{
  margin:0;
  text-align:center;
  letter-spacing:2px;           /* mirrored in SVG outline */
  text-transform:uppercase;
  display:grid;
  gap:var(--title-gap);
  padding:0 0 0.5rem;
}
.stacked span{
  display:block;
  font-weight:800;
  font-size:var(--title-size);
  line-height:1;
  white-space:nowrap;

  color: transparent;
  background-image: repeating-linear-gradient(
    to bottom,
    #ffffff 0 4px,                    /* white band */
    rgba(255,255,255,0) 4px 12px      /* thick black slit */
  );
  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-stroke: 1px #000;
  text-shadow:none;
}

/* Fallback for browsers without background-clip */
@supports not (-webkit-background-clip: text){
  .stacked span{
    color:#fff;
    -webkit-text-stroke:0;
    text-shadow:none;
  }
}

@media (max-width: 640px){
  :root{ --title-size:min(12vw,56px); }
}

/* TAGLINE */
.tagline{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  margin:0.8rem 0 0;
  letter-spacing:1.5px;
}

/* META */
.meta{
  text-align:center;
  margin:1.2rem 0 0;
  color:var(--muted);
  letter-spacing:1.5px;
}
.meta-line{ margin:4px 0; }
.online{ color:#6CFF7E }

/* QUOTE */
.quote{
  max-width:900px; margin:1.8rem auto 0; text-align:center; color:var(--muted); font-style:italic;
}
.quote cite{
  display:block; margin-top:.35rem; font-style:normal; font-size:.9rem; opacity:.85;
}

/* ART */
.art-wrap{ max-width:1000px; margin:1.5rem auto 0; }
#grog-art{ display:block; width:100%; height:auto; image-rendering:pixelated; }

/* BOTTOM NAV */
.site-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  background:rgba(0,0,0,.9);
  border-top:2px dashed var(--border);
  padding:12px 10px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.nav-btn{
  display:inline-block;
  padding:10px 14px;
  border:2px dashed var(--border);
  color:var(--fg);
  text-decoration:none;
  letter-spacing:1px;
  background:transparent;
  transition:background .2s;
}
.nav-btn.active{ background:#111; }
.nav-btn:hover{ background:#111; }
.nav-btn:focus{
  outline:3px dashed #888;
  outline-offset:2px;
}

/* TITLE WRAP */
.title-wrap{
  position:relative;
  display:block;
  width:max-content;
  margin:0 auto;
  line-height:1;
}
.title-front{ position:relative; z-index:2; }

/* SVG outline exactly over title; JS draws glyphs at true centers */
.title-outline{
  position:absolute;
  top:0; left:0;
  z-index:1;
  pointer-events:none;
  overflow:visible;
}

/* Halo 1 (inner/top) */
.title-outline .outline{
  fill:none;
  stroke:#fff;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
  stroke-miterlimit:2;
  stroke-dasharray: var(--outline-dash) var(--outline-gap);
  paint-order:stroke;
}
.title-outline .outer{ stroke-width: var(--outline-stroke-outer); }
.title-outline .mid  { stroke-width: var(--outline-stroke-mid);   }
.title-outline .inner{ stroke-width: var(--outline-stroke-inner); }

/* Halo 2 (outer/bottom), slightly thicker so the double-dash reads */
.title-outline .outline2{
  fill:none;
  stroke:#fff;
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
  stroke-linejoin:miter;
  stroke-miterlimit:2;
  stroke-dasharray: var(--outline-dash) var(--outline-gap);
  paint-order:stroke;
  opacity:1;
}
.title-outline .outer2{ stroke-width: var(--outline2-stroke-outer); }
.title-outline .mid2  { stroke-width: var(--outline2-stroke-mid);   }
.title-outline .inner2{ stroke-width: var(--outline2-stroke-inner); }