/* =========================================
   Mess O' Pedals — unified baseline
   "Onioncore" terminal / glitch aesthetic
   Pairs with header.css + store.css
   ========================================= */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("/assets/fonts/Inter-VariableFont_opsz,wght.ttf") format("truetype");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------- Theme tokens ---------- */
:root{
  /* core palette */
  --bg:#08000c;
  --bg-alt:#120016;
  --purple-deep:#1a0322;

  --text:#e8e6ea;
  --ink:#e8e6ea;
  --ink-dim:#b9b6c0;
  --ink-soft:#8b8792;
  --muted:#8b8792;

  --accent:#00ffcc;     /* teal */
  --teal:#00ffcc;
  --teal2:#5cfff1;
  --pink:#ff5bc8;
  --blue:#66ccff;

  /* aliases used by older markup */
  --neon-teal:#00ffcc;
  --neon-pink:#ff5bc8;
  --border-glow:rgba(0,255,204,0.45);

  --border:rgba(255,91,200,0.20);
  --hairline:rgba(255,255,255,0.08);
  --panel-bg:rgba(18,0,22,0.55);
  --panel-bd:rgba(255,91,200,0.20);

  --radius:3px;
  --maxw:1200px;
  --pad-x:24px;
  --pad-top:36px;

  /* header.css hooks */
  --header-grad:rgba(8,0,12,0.82);
  --header-border:rgba(255,91,200,0.20);
  --pill-bg:transparent;
  --pill-bd:rgba(255,91,200,0.20);

  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --font-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  /* onioncore dot-matrix */
  background-image:radial-gradient(rgba(255,91,200,0.10) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; }

/* ---------- Links ---------- */
a{
  color:var(--accent);
  text-decoration:none;
  font-weight:500;
  transition:color .15s steps(3);
}
a:hover{ color:var(--teal2); text-decoration:underline; text-underline-offset:3px; }

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

/* ---------- Layout ---------- */
.page-content{ padding-top:18px; }
.wrapper{ width:100%; display:flex; justify-content:center; }
.container{
  width:100%;
  max-width:var(--maxw);
  padding:var(--pad-top) var(--pad-x) 80px;
}

/* ---------- Typography ---------- */
h1,h2,h3{ font-family:var(--font-mono); letter-spacing:-0.01em; }

.container h1,
.glossy-frame h1{
  margin:0 0 18px;
  font-family:var(--font-mono);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:-0.03em;
  line-height:0.95;
  font-size:clamp(34px,6vw,68px);
  color:var(--text);
}
/* bio hero a touch smaller */
.glossy-frame h1{ font-size:clamp(30px,5vw,52px); text-align:left; }

.container h2{
  margin:0 0 12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  font-size:18px;
  color:var(--text);
}
/* terminal section marker */
.container h2::before{ content:">> "; color:var(--accent); }

.container h3{ font-weight:700; }

.container p{
  margin:0 0 16px;
  color:var(--ink-dim);
  font-size:16px;
}

small,.muted{ color:var(--ink-soft); }

/* ---------- Panelized sections (lab modules) ---------- */
section{
  padding:22px 22px;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-left:2px solid rgba(0,255,204,0.45);
  border-radius:0;
}
section + section{ margin-top:20px; }

/* ---------- Footer ---------- */
footer{
  max-width:var(--maxw);
  margin:0 auto;
  padding:22px var(--pad-x) 48px;
  color:var(--ink-soft);
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:0.5px;
  border-top:1px solid var(--border);
}
footer a{ color:var(--ink-soft); }
footer a:hover{ color:var(--accent); }
footer .accent{ color:var(--accent); }

/* ---------- Forms (bio intake + general) ---------- */
.glossy-frame{
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--pad-top) var(--pad-x) 60px;
}

.case-status{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
  background:rgba(0,255,204,0.08);
  border:1px solid rgba(0,255,204,0.30);
  padding:.3rem .6rem;
  margin:.4rem 0;
}
.subtitle{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--pink);
  font-size:.85rem;
}
.glitch-line{
  font-family:var(--font-mono);
  color:var(--ink-soft);
  font-size:.8rem;
  letter-spacing:.5px;
}
.neon-half-line{
  border:none;
  height:1px;
  background:linear-gradient(90deg,var(--accent),transparent);
  margin:18px 0;
}

.intake-panel{
  border:1px solid var(--border);
  background:var(--bg-alt);
  padding:18px;
}
.intake-form .field{ margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.intake-form label{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--accent);
}
.intake-form input,
.intake-form textarea,
input[type=text],input[type=email],textarea{
  width:100%;
  background:#0a0010;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:0;
  padding:10px 12px;
  font-family:var(--font-mono);
  font-size:.9rem;
}
.intake-form input:focus,
.intake-form textarea:focus,
input:focus,textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent);
}
.consent-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:.82rem;
  color:var(--ink-dim);
  margin:8px 0 14px;
}
.consent-check input{ margin-top:4px; accent-color:var(--accent); }

#submit-button,
input[type=submit]{
  font-family:var(--font-mono);
  font-size:.74rem;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:.8rem 1.3rem;
  background:transparent;
  color:var(--accent);
  border:1px solid var(--accent);
  border-radius:0;
  cursor:pointer;
  transition:background .2s steps(3),color .2s steps(3);
}
#submit-button:hover,
input[type=submit]:hover{ background:var(--accent); color:#000; }

#intake-status{ font-family:var(--font-mono); font-size:.78rem; color:var(--accent); }

/* ---------- Responsive ---------- */
@media (max-width:920px){ :root{ --pad-x:16px; } }
@media (max-width:640px){
  .container{ padding-top:24px; }
  section{ padding:18px 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; animation:none !important; }
}

/* ---------- Collapsible disclosure ---------- */
/* Shared toggle for the site's dropdown callouts (safety notes, fine-print, etc.).
   Native <details>; DEFAULT COLLAPSED. Add class="disclosure" beside the themed box. */
details.disclosure > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:10px;
}
details.disclosure > summary::-webkit-details-marker{ display:none; }
details.disclosure > summary::after{
  content:"\25B8"; margin-left:auto; font-size:.8rem; color:var(--pink);
  transition:transform .15s ease;
}
details.disclosure[open] > summary::after{ transform:rotate(90deg); }
.disclosure .disclosure-hint{
  font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft);
}
.disclosure .disclosure-body{ margin-top:12px; }


/* ===== Small helpers (moved from inline style attributes) ===== */
.center-row{ display:flex; justify-content:center; }
.nf-footer{ padding:1.5rem 1rem; opacity:.85; }
.nf-footer p{ margin:0; }
.bio-portrait{
  display:block;
  width:240px; height:auto;
  border-radius:var(--radius);
  border:2px solid var(--border-glow);
  box-shadow:
    0 0 18px var(--neon-pink),
    0 0 12px var(--neon-teal),
    inset 0 0 14px var(--purple-deep);
}