/* ============================================================
   SPOOKY CREW HUNT HELPER — shared editorial stylesheet
   Used by the content pages (home, guides, news, about, legal).
   The tool at /app.html keeps its own self-contained styles.
   Same token system as the tool for brand continuity.
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
:root{
  --bg:#070a0f; --surface:#0d1118; --surface2:#131926; --raise:#1a2231;
  --line:#232e40; --line2:#2e3b50;
  --ink:#e9eef4; --muted:#aab6c4; --faint:#75818f;
  --acc:#35e0a1; --acc-hot:#00ff9d; --acc-hover:#5aeab5; --acc-ink:#04130d; --acc-dim:#0c9c6b;
  --warn:#ffce5c; --danger:#ff4d64;
  --r:14px; --r-sm:10px; --r-lg:18px;
  --font:'Chakra Petch', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --body-font:system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --maxw:860px; --measure:68ch;
}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--font);
  overflow-wrap:break-word;
  line-height:1.62; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 70% at 50% -10%, rgba(0,255,157,.06), transparent 60%);
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--acc); text-decoration:none; }
a:hover{ color:var(--acc-hover); text-decoration:underline; }
:focus-visible{ outline:2px solid var(--acc); outline-offset:2px; border-radius:6px; }
.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.faint{ color:var(--faint); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
.skip-link{ position:fixed; left:8px; top:-60px; z-index:100; background:var(--acc); color:var(--acc-ink);
  font-weight:700; padding:10px 14px; border-radius:var(--r-sm); transition:top .15s; }
.skip-link:focus{ top:8px; text-decoration:none; }

/* ---------- header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(7,10,15,.93);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw); margin:0 auto; padding:12px 16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.brand a{ color:var(--ink); text-decoration:none; }
.led{ width:9px; height:9px; border-radius:50%; background:var(--acc-hot); box-shadow:0 0 10px var(--acc-hot); flex:none; animation:blip 2.4s infinite; }
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.brand-name{ font-weight:700; font-size:1rem; letter-spacing:.02em; line-height:1.15; }
.brand-name .sub{ display:block; font-family:var(--mono); font-weight:400; font-size:10px; color:var(--faint); }
.site-nav{ display:flex; gap:4px; flex-wrap:wrap; }
.site-nav a{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:7px 11px; border-radius:999px; border:1px solid transparent;
}
.site-nav a:hover{ color:var(--ink); text-decoration:none; border-color:var(--line2); }
.site-nav a[aria-current="page"]{ color:var(--acc); border-color:rgba(0,255,157,.4); background:rgba(0,255,157,.08); }
.site-nav a.cta{ color:var(--acc-ink); background:var(--acc); border-color:var(--acc); font-weight:700; }
.site-nav a.cta:hover{ background:var(--acc-dim); border-color:var(--acc-dim); color:var(--acc-ink); }

/* ---------- layout ---------- */
main{ max-width:var(--maxw); margin:0 auto; padding:28px 16px 60px; }
.stack > * + *{ margin-top:16px; }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:20px;
}
.card.hatched{ background:repeating-linear-gradient(-45deg, var(--surface), var(--surface) 8px, var(--surface2) 8px, var(--surface2) 9px); }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:680px){ .grid-2{ grid-template-columns:1fr; } }

/* ---------- typography ---------- */
h1,h2,h3,h4{ line-height:1.25; margin:0; }
p,ul,ol{ margin:0; max-width:var(--measure); }
ul,ol{ padding-left:1.2em; }
.eyebrow{ font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--acc); }
.title-hero{ font-size:clamp(1.7rem, 4.6vw, 2.5rem); font-weight:700; letter-spacing:.01em; }
.title-page{ font-size:clamp(1.4rem, 3.6vw, 1.9rem); font-weight:700; }
.lead{ color:var(--muted); font-size:1.02rem; }
.h-acc{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--acc); margin-bottom:10px;
}
.meta-line{ font-family:var(--mono); font-size:11px; color:var(--faint); display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tag{ background:rgba(0,255,157,.12); color:var(--acc); border:1px solid rgba(0,255,157,.4); border-radius:999px; padding:1px 9px; font-family:var(--mono); font-size:10.5px; }
.tag.warn{ background:rgba(255,209,102,.1); color:var(--warn); border-color:rgba(255,209,102,.4); }

/* ---------- article body ---------- */
.article{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:26px 22px; }
.article header{ margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.article h2{ font-size:1.28rem; margin:26px 0 10px; }
.article h3{ font-size:1.05rem; margin:20px 0 8px; color:var(--ink); }
.article p{ margin:0 0 15px; color:var(--muted); }
.article p, .article li{ font-family:var(--body-font); font-size:16.5px; line-height:1.72; letter-spacing:.005em; }
.article p strong{ color:var(--ink); }
.article ul, .article ol{ margin:0 0 15px; color:var(--muted); }
.article li{ margin-bottom:7px; }
.article li::marker{ color:var(--acc); }

/* field note callout: the tool's reasoning-note style, reused editorially */
.fieldnote{
  display:flex; gap:11px; align-items:flex-start;
  background:rgba(0,255,157,.05); border:1px solid rgba(0,255,157,.28);
  border-left:3px solid var(--acc); border-radius:var(--r-sm);
  padding:12px 14px; margin:16px 0;
}
.fieldnote .ic{ font-family:var(--mono); color:var(--acc); font-size:12px; flex:none; margin-top:2px; }
.fieldnote p{ margin:0; font-size:.9rem; color:var(--ink); }
.fieldnote.warn{ background:rgba(255,209,102,.05); border-color:rgba(255,209,102,.3); border-left-color:var(--warn); }
.fieldnote.warn .ic{ color:var(--warn); }

/* ---------- teaser cards ---------- */
.teaser{ display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; color:var(--ink); transition:border-color .15s, transform .15s; }
.teaser:hover{ text-decoration:none; border-color:var(--acc-dim); transform:translateY(-1px); }
.teaser h3{ font-size:1.02rem; margin:8px 0 6px; }
.teaser p{ font-size:.88rem; color:var(--muted); }
.teaser .more{ display:inline-block; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--acc); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:inherit; font-weight:700;
  padding:12px 20px; border-radius:var(--r-sm); border:1px solid var(--line2);
  background:var(--surface2); color:var(--ink); cursor:pointer; font-size:.95rem;
}
.btn:hover{ text-decoration:none; border-color:var(--acc-dim); }
.btn-acc{ background:var(--acc); color:var(--acc-ink); border-color:var(--acc); }
.btn-acc:hover{ background:var(--acc-dim); border-color:var(--acc-dim); }

/* ---------- ad container (content pages only) ---------- */
.ad-wrap{ margin:22px 0; text-align:center; }
.ad-label{ display:block; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; }

/* ---------- footer ---------- */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; padding:26px 16px 34px; }
.footer-nav{ display:flex; gap:6px 18px; flex-wrap:wrap; margin-bottom:14px; }
.footer-nav a{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.footer-note{ font-size:.78rem; color:var(--faint); max-width:none; }
.footer-note a{ color:var(--muted); }

/* ---------- tables ---------- */
table{ width:100%; border-collapse:collapse; font-size:.88rem; margin:0 0 13px; }
th,td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); color:var(--muted); }
th{ font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--acc); }


/* ============================================================
   LAYOUT MODES
   Auto (default): compact reading column on phones, wide shell
   on large screens. "Layout" button in the nav can force Wide
   or Compact; the choice is remembered on this device.
   Prose always stays a comfortable reading column so words are
   never stretched or crushed.
   ============================================================ */
@media (min-width:1100px){
  html:not(.layout-compact){ --maxw:1100px; }
}
html.layout-wide{ --maxw:1100px; }
@media (max-width:699px){
  /* forced-wide on a small screen raises density slightly but never crushes */
  html.layout-wide{ --maxw:860px; }
}
html.layout-compact{ --maxw:760px; }

/* prose keeps its own centered reading column when the shell is wide */
.article{ max-width:840px; }
@media (min-width:1100px){
  html:not(.layout-compact) .article{ margin-left:auto; margin-right:auto; width:100%; }
}
html.layout-wide .article{ margin-left:auto; margin-right:auto; width:100%; }

.layout-toggle{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  background:none; border:1px solid var(--line2); border-radius:999px;
  padding:7px 11px; cursor:pointer; line-height:1;
}
.layout-toggle:hover{ color:var(--ink); border-color:var(--acc); }