/* ==========================================================================
   CEG SITE CHROME: shared header/footer for the free tools pages, so they
   read as part of the same site as /creators/ and /brands/ rather than a
   bolted-on utility. Same token set as those pages (kept in sync manually;
   see the TOKENS comment in creators/index.html).
   Deliberately scoped to header/nav/footer only: page body content on tool
   pages uses its own fixed palette (see tools.css .ceg-tool), not these
   dark/light tokens.
   ========================================================================== */
:root, html[data-theme="dark"] {
  --bg:#0A0A0A; --bar:#111111; --panel:#0E0E0E;
  --border:#262626; --border-2:#3A3A38;
  --fg:#F4F1EA; --body:#B8B5AC; --muted:#8A877E; --dim:#55524A;
  --accent:#FF4A00; --accent-text:#FF4A00; --accent-ink:#111111;
  --scan:rgba(244,241,234,0.05); --scan-op:1;
  --grid:rgba(244,241,234,0.028);
}
html[data-theme="light"] {
  --bg:#ECEBE7; --bar:#F4F1EA; --panel:#FBFAF7;
  --border:#D8D6CF; --border-2:#C9C6BE;
  --fg:#111111; --body:#45423B; --muted:#55524A; --dim:#A9A69C;
  --accent:#FF4A00; --accent-text:#B83600; --accent-ink:#111111;
  --scan:rgba(17,17,17,0.05); --scan-op:0.5;
  --grid:rgba(17,17,17,0.03);
}

html { scroll-behavior:smooth; }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.skip-link { position:absolute; left:-9999px; top:0; z-index:300; background:var(--accent); color:var(--accent-ink); padding:12px 18px; font-family:"Space Mono", monospace; font-size:13px; font-weight:700; }
.skip-link:focus { left:12px; top:12px; }

.scanlines {
  position:fixed; inset:0; z-index:90; pointer-events:none;
  background-image:repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 4px);
  opacity:var(--scan-op);
}
.gridlines {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px),
                   linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 100% 70% at 50% 0%, #000 30%, transparent 78%);
}

.wrap { max-width:1280px; margin:0 auto; padding:0 56px; position:relative; z-index:1; }

@keyframes cegBlink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }

.btn {
  display:inline-flex; align-items:center; gap:9px;
  font-family:"Space Mono", monospace; font-size:13px; font-weight:700;
  padding:13px 20px; border:1px solid var(--border-2);
  background:transparent; color:var(--fg); cursor:pointer; border-radius:0;
  text-decoration:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { border-color:var(--accent); color:var(--accent-text); opacity:1; }
.btn .caret { color:var(--accent); font-weight:700; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn-primary .caret { color:var(--accent-ink); }
.btn-primary:hover { background:var(--accent); color:var(--accent-ink); filter:brightness(1.1); transform:translateY(-1px); }
.btn-sm { padding:9px 14px; font-size:12px; }
.cta-short { display:none; }

header {
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(9px); border-bottom:1px solid var(--border);
}
.nav { display:flex; align-items:center; gap:18px; height:64px; }
.wordmark { display:flex; align-items:center; gap:5px; font-family:"Space Mono", monospace; font-weight:700; font-size:22px; letter-spacing:-1.5px; color:var(--fg); text-decoration:none; }
.wordmark:hover { opacity:1; color:var(--fg); }
.wordmark .blk { display:inline-block; width:10px; height:19px; background:var(--accent); animation:cegBlink 1.1s steps(1,end) infinite; }
.nav-links { display:flex; align-items:center; gap:22px; margin-left:auto; }
.nav-links a { font-family:"Space Mono", monospace; font-size:12px; color:var(--muted); text-decoration:none; }
.nav-links a:hover { color:var(--accent-text); opacity:1; }
.nav-right { display:flex; align-items:center; gap:10px; }
.icon-btn {
  font-family:"Space Mono", monospace; font-size:12px;
  display:inline-flex; align-items:center; gap:6px;
  background:transparent; border:1px solid var(--border); color:var(--fg);
  padding:7px 10px; cursor:pointer;
}
.icon-btn:hover { border-color:var(--accent); color:var(--accent-text); }
#menuBtn { display:none; }
#mobileNav { display:none; }
#mobileNav[data-open="true"] { display:block; border-top:1px solid var(--border); background:var(--bar); padding:10px 0 16px; }
#mobileNav a { display:block; font-family:"Space Mono", monospace; font-size:14px; color:var(--fg); padding:14px 56px; border-bottom:1px solid var(--border); text-decoration:none; }
#mobileNav a:hover { color:var(--accent-text); opacity:1; }

footer { border-top:1px solid var(--border); background:var(--bar); padding:34px 0 40px; }
.foot { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
.foot .col { font-family:"Space Mono", monospace; font-size:12px; color:var(--muted); line-height:1.9; }
.foot .col a:not(.wordmark) { color:var(--muted); display:block; text-decoration:none; }
.foot .col a:not(.wordmark):hover { color:var(--accent-text); opacity:1; }
.foot .wordmark { display:inline-flex; }
.foot .col .h { color:var(--fg); font-weight:700; margin-bottom:6px; }
.foot-btm { margin-top:30px; padding-top:20px; border-top:1px solid var(--border); font-family:"Space Mono", monospace; font-size:11px; line-height:1.7; color:var(--muted); display:flex; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; }
.foot-btm > span:first-child { max-width:760px; }

@media (max-width:1100px) {
  .wrap { padding:0 34px; }
  #mobileNav a { padding:14px 34px; }
}
@media (max-width:860px) {
  .nav-links { display:none; }
  #menuBtn { display:inline-flex; }
  .nav-right { margin-left:auto; }
  .icon-btn, .nav-right .btn-sm { min-height:44px; }
}
@media (max-width:560px) {
  .cta-long { display:none; }
  .cta-short { display:inline; }
  .wrap { padding:0 20px; }
  #mobileNav a { padding:14px 20px; }
  .wordmark { font-size:19px; }
}
@media (hover:none) and (pointer:coarse) {
  .icon-btn, .nav-right .btn-sm { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}