/* === Neon Notebook Theme (dark + neon + scribbles) === */
:root{
  --bg:#0E0F13;
  --panel:#151721;
  --text:#E9E9EE;
  --muted:#9AA0A6;
  --border:rgba(255,255,255,0.08);
  --neon-cyan:#00E5FF;
  --neon-magenta:#FF00AA;
  --neon-orange:#FF6A00;
}
body{ background: var(--bg) url('../assets/images/noise.png') repeat; color: var(--text); }
header.site-header{ background: rgba(14,15,19,.82); backdrop-filter: blur(6px); border-bottom:1px solid var(--border); }
.logo .brand{ color:#fff }
.burger{ background: rgba(255,255,255,0.04); box-shadow: 0 0 0 1px var(--border) inset; color:#fff }
nav.drawer{ background: var(--panel); border-left:1px solid var(--border); box-shadow:-6px 0 26px rgba(0,0,0,.4) }
nav.drawer a{ border-color: var(--border); color: var(--text); background: rgba(255,255,255,0.02); }
h1,h2,h3{ color:#fff; letter-spacing: 0.2px; }
p.sub, .subtitle{ color:var(--muted) }
.btn{ border-color: var(--border); background: rgba(255,255,255,0.02); color:#fff }
.btn.primary{ background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta)); border:none; }
.btn.secondary{ border-color: var(--neon-orange); color:#fff }
.pillar-card{ background: rgba(255,255,255,0.02); border-color: var(--border); box-shadow: 0 10px 30px rgba(0,0,0,.25) }
footer{ background: rgba(255,255,255,0.02); border-top:1px solid var(--border); color: var(--muted) }
.link-card{ background: rgba(255,255,255,0.03); border-color: var(--border); color:#fff }
.archive-item{ background: rgba(255,255,255,0.03); border-color: var(--border) }
h2{ position:relative; display:inline-block; padding-bottom:8px }
h2::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-orange));
  filter: drop-shadow(0 0 8px rgba(0,229,255,.5));
}
section#hero{ position:relative; }
section#hero::after{
  content:""; position:absolute; inset:-15%;
  background:
    radial-gradient(600px 380px at 70% 40%, rgba(0,229,255,0.10), transparent 60%),
    radial-gradient(560px 360px at 25% 70%, rgba(255,0,170,0.08), transparent 60%),
    radial-gradient(520px 340px at 80% 90%, rgba(255,106,0,0.08), transparent 60%);
  animation: pulseGlow 7s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
.hero-inner{ position:relative; z-index:1 }
@keyframes pulseGlow{
  from{ opacity:.7; transform:scale(1)}
  to{ opacity:.95; transform:scale(1.03)}
}
section#hero::before,
section#dopamine-doctrine::after,
section#archive-of-distractions::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat,no-repeat;
  background-image: url('../assets/images/scribble-blue.svg'), url('../assets/images/scribble-orange.svg');
  background-position: right -120px top -80px, left -160px bottom -140px;
  background-size: 780px auto, 820px auto;
  opacity:1;
}
#dopamine-doctrine .container,
#archive-of-distractions .container{ position:relative; z-index:1 }


:root{--blue:#007BFF; --orange:#FF6600; --text:#111; --muted:#666; --border:#ececec}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background: var(--bg);line-height:1.5;}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
header.site-header{position:fixed;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;background: var(--bg);border-bottom:1px solid #eee;z-index:999}
.header-left{display:flex;align-items:center;gap:12px;padding-left:12px}
.logo img{height:40px;width:40px} .logo .brand{font-weight:800;font-size:18px}
.burger{border:none;background: var(--bg);width:44px;height:44px;margin-right:8px;cursor:pointer;border-radius:10px;box-shadow:0 0 0 1px #eee inset}
nav.drawer{position:fixed;top:0;right:-360px;width:320px;height:100vh;background: var(--bg);border-left:1px solid #eee;box-shadow:-6px 0 20px rgba(0,0,0,.06);transition:right .25s ease;z-index:1000;padding:20px}
nav.drawer.open{right:0}.drawer a{display:block;padding:12px 8px;border-radius:8px;border:1px solid var(--border);margin-bottom:10px}
main{padding-top:64px}
/* Hero */
#hero{min-height:100vh;display:flex;align-items:center}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px}
.hero h1{font-size:56px;line-height:1.05;margin:0 0 8px}
.hero h2{font-size:30px;margin:0 0 14px}
.hero p.sub{color:var(--muted);font-size:18px;margin:0 0 24px;max-width:680px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.btn{padding:14px 18px;border-radius:10px;font-weight:700;border:1px solid var(--border)}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)} .btn.secondary{border-color:var(--orange);color:#222}
.hero-logo{display:flex;align-items:center;justify-content:center} .hero-logo img{max-width:480px}
/* Doctrine */
#dopamine-doctrine{padding:80px 0}
.grid-2x2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.pillar-card{border:1px solid var(--border);border-radius:12px;padding:22px;box-shadow:0 4px 12px rgba(0,0,0,.04)}
/* Manifesto preview */
#adhd-manifesto{padding:80px 0;border-top:1px solid #f3f3f3}
.manifesto-body{max-width:900px}
/* Archive */
#archive-of-distractions{padding:80px 0;border-top:1px solid #f3f3f3}
.archive-grid.preview{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.archive-grid.full{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.archive-item{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#fafafa}
/* Lightbox */
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:2000}
#lightbox.open{display:flex} .lb-content{position:relative;max-width:90vw;max-height:90vh}
.lb-controls{position:absolute;top:-46px;right:0;display:flex;gap:8px}
.lb-btn{background: var(--bg);color:#111;border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:44px;background:rgba(0,0,0,0.35);border:none;cursor:pointer;padding:14px 18px;border-radius:12px;backdrop-filter:blur(2px)}
.lb-prev{left:10px}.lb-next{right:10px}
/* Directory */
#degenerate-directory{padding:80px 0;border-top:1px solid #f3f3f3}
.links-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.link-card{display:flex;align-items:center;gap:16px;padding:18px;border:1px solid var(--border);border-radius:12px;background: var(--bg);box-shadow:0 2px 10px rgba(0,0,0,.03)}
.link-card .icon img{width:28px;height:28px} .link-card .chevron{margin-left:auto}
/* Footer */
footer{background: var(--bg);border-top:1px solid #e6e6e6;text-align:center;padding:46px 20px 34px;color:#555}
/* Refocus */
#refocusBtn{position:fixed;bottom:40px;right:40px;background:var(--blue);color:#fff;border:none;border-radius:50%;width:58px;height:58px;font-size:14px;cursor:pointer;opacity:0;visibility:hidden;box-shadow:0 4px 10px rgba(0,0,0,.15);transition:opacity .3s,transform .2s,visibility .3s;z-index:2100}
#refocusBtn.show{opacity:1;visibility:visible}
@media(max-width:980px){.hero-inner{grid-template-columns:1fr;text-align:center}.archive-grid.preview{grid-template-columns:1fr}}


/* Ambient flair: faint scribbles in sections */
section#dopamine-doctrine,
section#adhd-manifesto,
section#archive-of-distractions,
section#degenerate-directory{
  position: relative;
  overflow: hidden;
}
section#dopamine-doctrine::before,
section#adhd-manifesto::before,
section#archive-of-distractions::before,
section#degenerate-directory::before{
  content: "";
  position: absolute;
  inset: -40px -20px -20px -20px;
  background-image: url('../assets/images/scribble-bg.svg');
  background-repeat: no-repeat;
  background-size: 900px auto;
  background-position: right -120px top -60px;
  pointer-events: none;
  opacity: 1; /* controlled by SVG opacity */
  z-index: 0;
}
/* ensure content sits above */
section#dopamine-doctrine > .container,
section#adhd-manifesto > .container,
section#archive-of-distractions > .container,
section#degenerate-directory > .container{ position: relative; z-index: 1; }

/* Hero subtle pulsing glow */
section#hero{ position: relative; }
section#hero::after{
  content:"";
  position:absolute; inset:-10%; 
  background: radial-gradient(600px 400px at 70% 40%, rgba(0,123,255,0.08), transparent 60%),
              radial-gradient(500px 380px at 20% 70%, rgba(255,102,0,0.08), transparent 60%);
  filter: blur(2px);
  animation: pulseGlow 6s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
.hero-inner{ position: relative; z-index:1; }
@keyframes pulseGlow{
  from{ opacity: 0.55; transform: scale(1); }
  to{ opacity: 0.85; transform: scale(1.02); }
}

/* Lightbox caption */
.lb-caption{
  margin-top: 10px;
  color: #f2f2f2;
  text-align: center;
  font-size: 14px;
  line-height: 1.4;
  max-width: 90vw;
  opacity: 0.9;
}

/* Ambient scribble backgrounds */
section#hero::before,
section#dopamine-doctrine::before,
section#archive-of-distractions::before,
section#degenerate-directory::before{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:220px;
  background:url('../assets/images/scribble-bg.svg') center/contain no-repeat;
  opacity:0.5;
  pointer-events:none;
}
section#hero, section#dopamine-doctrine, section#archive-of-distractions, section#degenerate-directory{
  position:relative;
  overflow:hidden;
}


/* Lightbox nav patch */
.lb-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  font-size:42px;
  background:rgba(0,0,0,0.35);
  border:none;
  cursor:pointer;
  line-height:1;
  width:48px; height:72px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  z-index:2100;
  transition:background .2s ease, transform .1s ease;
}
.lb-prev{ left:16px; }
.lb-next{ right:16px; }
.lb-nav:hover{ background:rgba(0,0,0,0.55); transform:translateY(-50%) scale(1.03); }
@media (max-width: 640px){
  .lb-nav{ font-size:36px; width:42px; height:64px; }
  .lb-prev{ left:8px; } .lb-next{ right:8px; }
}


/* Ambient scribble layers */
section#hero::after,
section#dopamine-doctrine::after,
section#archive-of-distractions::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-repeat:no-repeat, no-repeat;
  background-position: right -80px top -40px, left -120px bottom -60px;
  background-size: 700px auto, 700px auto;
  opacity:1; /* actual line opacity is in the svgs */
  z-index:0;
}
/* position context */
section#hero, section#dopamine-doctrine, section#archive-of-distractions{ position:relative; overflow:hidden; }
/* specific backgrounds */
section#hero::after{
  background-image: url('../assets/images/scribble-blue.svg'), url('../assets/images/scribble-orange.svg');
}
section#dopamine-doctrine::after{
  background-image: url('../assets/images/scribble-orange.svg'), url('../assets/images/scribble-blue.svg');
}
section#archive-of-distractions::after{
  background-image: url('../assets/images/scribble-blue.svg'), url('../assets/images/scribble-orange.svg');
}
@media (max-width: 980px){
  section#hero::after,
  section#dopamine-doctrine::after,
  section#archive-of-distractions::after{
    background-size: 520px auto, 520px auto;
    background-position: right -120px top -100px, left -160px bottom -120px;
  }
}


/* Prevent horizontal scroll */
html, body { overflow-x: hidden; }

/* Drawer close button and backdrop */
.drawer-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  font-size: 18px;
  cursor: pointer;
}
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
  z-index: 900;
}
.drawer-backdrop.show { opacity: 1; visibility: visible; }

/* Ensure hero image never causes overflow and scales nicely */
.hero-logo img { max-width: 520px; width: 100%; height: auto; }


/* === Neon Notebook: visibility & contrast fixes === */
/* Ensure sections allow pseudo-element overlays */
section#hero, section#dopamine-doctrine, section#archive-of-distractions{ position:relative; overflow:hidden; }
.hero-inner, #dopamine-doctrine .container, #archive-of-distractions .container{ position:relative; z-index:1 }

/* Add lightning bolts layer */
section#hero::before,
section#dopamine-doctrine::before,
section#archive-of-distractions::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url('../assets/images/bolt.svg');
  background-repeat: repeat;
  background-size: 180px auto;
  background-position: center;
  opacity: .08;
}

/* Text contrast across components */
body, p, li, .link-card p, .pillar-card p, .manifesto-body p { color: var(--text); }
.subtitle, p.sub, .micro { color: var(--muted); }
h1,h2,h3,.logo .brand { color: #fff; }

/* Nav drawer link color and hover */
nav.drawer a{ color: var(--text) !important; }
nav.drawer a:hover{ background: rgba(255,255,255,0.06); }

/* Buttons */
.btn{ color:#fff !important; }
.btn.secondary{ border-color: var(--neon-orange) !important; color:#fff !important; }
.btn.secondary:hover{ background: rgba(255,106,0,0.08); }

/* Cards readability */
.link-card h3{ color:#fff; }
.link-card p{ color: var(--muted); }

/* Footer */
footer { color: var(--muted); }
footer strong, footer em { color: #eaeaf0; }

/* Ensure headings underline glow sits above scribbles */
h2{ position:relative; z-index:2 }


/* === FORCE VISIBILITY PASS (fix3) === */
html, body { background-color:#0E0F13 !important; color:#E9E9EE !important; }
body {
  background-image: url('../assets/images/noise.png');
  background-repeat: repeat, no-repeat, no-repeat, repeat;
  background-position: center, right -100px top -80px, left -140px bottom -120px, 0 0;
  background-size: 160px auto, 780px auto, 820px auto, auto;
}

h1, h2, h3, h4, h5, h6, .logo .brand { color:#FFFFFF !important; }
p, li, span, a, .subtitle, .sub, .micro, .link-card p, .pillar-card p, .manifesto-body p { color:#E9E9EE !important; }
a { color:#E9E9EE !important; }
.btn, .btn.secondary { color:#FFFFFF !important; }
.link-card h3 { color:#FFFFFF !important; }
footer { color:#B8BDC6 !important; }

/* Ensure content sits above any pseudo-element art */
section, .container { position: relative; z-index: 1; }

/* Give archive grid items a faint border for contrast */
.archive-item { border:1px solid rgba(255,255,255,0.08) !important; }

/* Make sure the drawer text is visible */
nav.drawer a { color:#E9E9EE !important; background: rgba(255,255,255,0.04) !important; }
nav.drawer { background:#151721 !important; }


/* Neon Notebook hero art: big bolts + scribbles (hero only) */
section#hero{
  position: relative;
  background-image:
    url('../assets/images/bolt.svg'),
    url('../assets/images/scribble-blue.svg'),
    url('../assets/images/scribble-orange.svg');
  background-repeat: repeat, no-repeat, no-repeat;
  background-size: 260px auto, 1200px auto, 1200px auto;
  background-position: center, right -140px top -120px, left -180px bottom -160px;
}


/* Strong contrast enforcement */
h1,h2,h3,h4,h5,h6,.logo .brand{ color:#FFF !important; }
p,li,span,.subtitle,.sub,.micro,.link-card p,.pillar-card p,.manifesto-body p, a{ color:#E9E9EE !important; }
.btn,.btn.secondary{ color:#FFF !important; }


/* Bigger, clearer scribbles on Doctrine/Archive */
section#dopamine-doctrine::after,
section#archive-of-distractions::before{
  content:"";
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-repeat:no-repeat,no-repeat;
  background-image: url('../assets/images/scribble-blue.svg'), url('../assets/images/scribble-orange.svg');
  background-position: right -120px top -80px, left -180px bottom -160px;
  background-size: 1200px auto, 1200px auto;
  opacity:1;
}
#dopamine-doctrine .container,
#archive-of-distractions .container{ position:relative; z-index:1; }


/* Logo swap tweaks */
.logo img{ width:44px; height:44px; border-radius:50%; object-fit:cover }
.hero-logo{ margin-top:18px; display:flex; align-items:center; justify-content:flex-start }
@media(max-width:980px){ .hero-logo{ justify-content:center } }
.hero-logo img{ max-width:360px; width:100%; height:auto; filter: drop-shadow(0 10px 30px rgba(0,0,0,.45)); }


/* Transparent logo sizing tweaks */
.logo img{ width:44px; height:44px; border-radius:50%; object-fit:cover }
.hero-logo img{ max-width:360px; width:100%; height:auto }


/* === Right-edge clip fix (Degenerate Directory) === */
#degenerate-directory { position: relative; overflow-x: hidden; }
#degenerate-directory .container { padding-right: 20px; padding-left: 20px; }

/* Add inner gutter so cards never press against the viewport edge */
.links-grid { padding: 0 8px; }

/* Ensure grid never exceeds container width on any device */
.links-grid, .archive-grid.preview, .archive-grid.full {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Safety: prevent sub-pixel overflow on small screens */
html, body { overflow-x: hidden; }
section, .container { box-sizing: border-box; }

/* Mobile tuning */
@media (max-width: 768px){
  .container { padding-left: 16px; padding-right: 16px; }
  .links-grid { gap: 16px; padding: 0 6px; }
}


/* === Right-edge comfort pass (v2) === */
#degenerate-directory { padding-right: 24px; padding-left: 24px; }
.links-grid { padding: 0 12px; gap: 18px; }
.link-card { padding: 22px; }

@media (max-width: 768px){
  #degenerate-directory { padding-right: 22px; padding-left: 22px; }
  .links-grid { padding: 0 12px; gap: 18px; }
}

@supports (padding: max(0px)) {
  /* Account for iOS safe area to avoid visual clipping near the right chrome */
  #degenerate-directory { padding-right: max(22px, env(safe-area-inset-right)); padding-left: max(22px, env(safe-area-inset-left)); }
}


/* === Right-edge fix (v3): true grid shrink + word wrap === */
.links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* allow children to actually shrink */
}
.link-card {
  min-width: 0;               /* override intrinsic min content width */
  box-sizing: border-box;
}
.link-card h3, .link-card p, .link-card a {
  overflow-wrap: anywhere;     /* break long tokens like 'Dexscreener' safely */
  word-break: break-word;
}

/* Extra safety only for very narrow screens */
@media (max-width: 380px){
  .links-grid { gap: 14px; }
  .link-card { padding: 18px; }
}


/* === Text Fix: prevent over-aggressive wrapping in link-card headings === */
.link-card h3 { overflow-wrap: normal; word-break: normal; white-space: normal; }


/* === Flow Fix v1: equal-height grid cards & balanced text === */
.links-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* rows match tallest card for alignment */
  align-items: stretch;
}

.link-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;  /* title / meta balanced inside */
  min-height: 200px;
}

/* Tighter typography on small screens for nicer rhythm */
@media (max-width: 420px){
  .link-card { min-height: 220px; }
  .link-card h3 { font-size: 1.12rem; line-height: 1.2; }
  .link-card p  { font-size: 0.95rem; line-height: 1.35; }
}


/* Force 2 columns for archive preview on all sizes */
.archive-grid.preview{
  display:grid;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px;
}
@media (max-width: 980px){
  .archive-grid.preview{ grid-template-columns: repeat(2, 1fr) !important; }
}


/* --- Fix: make lightbox Close button readable on dark --- */
#lightbox .lb-btn.lb-close {
  color: #fff !important;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
}
#lightbox .lb-btn.lb-close:hover {
  background: rgba(255,255,255,0.16);
  text-shadow: 0 0 6px rgba(255,255,255,0.85);
}
/* --- End fix --- */