/* ============================================================================
   OXMIQ "vibe" design system — the OxPython page's look, made reusable.
   Everything is scoped under `body.vibe` so it only affects pages that opt in
   (via `bodyClass: 'vibe'` in their 11ty data) and never touches the shared
   nav/footer or pages that haven't been converted.
   Theme colors still come from v2-styles.css (data-theme); this adds the extra
   tokens, typography, section bands, and component styles.
   ========================================================================== */

.vibe {
  --fg-4: rgba(27,30,94,.22);
  --shadow: 0 2px 4px rgba(18,20,45,.04), 0 8px 18px rgba(18,20,45,.07), 0 16px 36px rgba(18,20,45,.06);
  --main: 'Oxygen',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono: 'Oxygen Mono','SFMono-Regular',Menlo,Consolas,monospace;
}

/* Section-level dark bands (hero + alternating). */
.vibe .dark {
  --bg:#000000; --bg-soft:#0A0A0E; --bg-card:#0E0E14;
  --fg:#FFFFFF; --fg-2:rgba(255,255,255,.66); --fg-3:rgba(255,255,255,.42); --fg-4:rgba(255,255,255,.22);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.22);
  --accent:#E89B5C; --accent-2:#F4ECD0; --accent-3:#3B5BD9;
  --bloom-a:rgba(59,91,217,.45); --bloom-b:rgba(87,74,142,.35); --bloom-c:rgba(232,155,92,.22); --bloom-d:rgba(168,48,44,.18);
}

/* ---- eyebrows ---- */
.vibe .eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:.55rem}
.vibe .eyebrow::before{content:"\25C6";font-size:.6em;color:var(--accent);transform:translateY(-1px)}
.vibe .eyebrow.muted{color:var(--fg-3)}

/* ---- headings + copy ---- */
.vibe .display{font-weight:700;line-height:1.06;color:var(--fg);letter-spacing:-.01em;font-size:clamp(2.4rem,6.2vw,4.6rem)}
.vibe .h-section{font-weight:700;line-height:1.06;color:var(--fg);letter-spacing:-.01em;font-size:clamp(1.85rem,4vw,3rem);max-width:22ch}
.vibe .h-section.tight{margin-top:1rem}
.vibe h3{font-weight:700;line-height:1.1;color:var(--fg);letter-spacing:-.01em}
.vibe .lead{font-size:clamp(1.1rem,1.6vw,1.35rem);line-height:1.55;max-width:60ch;color:var(--fg-2)}
.vibe main p{max-width:62ch}
.vibe .body-lg{font-size:1.08rem}
.vibe .rule{height:2px;width:64px;background:var(--accent);border:0;margin:0}
.vibe .block-head{margin-bottom:2.6rem}
.vibe .block-head .eyebrow{margin-bottom:1rem}

/* ---- full-bleed bands (break out of the shell .wrap; inner .wrap re-centers) ---- */
.vibe main section{
  padding-block:clamp(4.5rem,9vw,8rem);
  background:var(--bg);
  position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
}
.vibe main section.soft{background:var(--bg-soft)}
.vibe main section > .wrap{position:relative;z-index:1}
.vibe .oxpy-bloom::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 55% at 0% 0%, var(--bloom-a), transparent 70%),
    radial-gradient(60% 55% at 100% 0%, var(--bloom-b), transparent 70%),
    radial-gradient(60% 55% at 100% 100%, var(--bloom-c), transparent 70%),
    radial-gradient(60% 55% at 0% 100%, var(--bloom-d), transparent 70%);}

/* ---- hero ---- */
.vibe .hero .wrap{padding-block:clamp(2rem,5vw,4rem) clamp(2rem,5vw,3rem)}
.vibe .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.vibe .hero .display{margin:1.4rem 0 1.6rem}
.vibe .hero .lead{max-width:48ch}
.vibe .hero-foot{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3)}
.vibe .tag{border:1px solid var(--line-2);padding:.4rem .7rem;border-radius:2px;color:var(--fg-2);font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}

/* ---- code panel ---- */
.vibe .codepanel{background:var(--bg-card);border:1px solid var(--line-2);border-radius:8px;box-shadow:0 30px 60px -24px rgba(0,0,0,.8);overflow:hidden}
.vibe .codepanel .bar{display:flex;align-items:center;gap:.4rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.vibe .codepanel .dot{width:10px;height:10px;border-radius:50%;background:var(--fg-4)}
.vibe .codepanel .bar .fname{margin-left:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--fg-3)}
.vibe .codepanel pre{margin:0;padding:1.3rem 1.4rem;font-family:var(--mono);font-size:.83rem;line-height:1.85;color:var(--fg-2);overflow-x:auto}
.vibe .codepanel .cmt{color:var(--fg-3)} .vibe .codepanel .kw{color:var(--accent)} .vibe .codepanel .str{color:var(--accent-2)} .vibe .codepanel .fn{color:#9fb1ec}
.vibe .codepanel .target{border-top:1px solid var(--line);padding:.95rem 1.4rem;display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.78rem;background:rgba(255,255,255,.02);flex-wrap:wrap}
.vibe .codepanel .target .label{color:var(--fg-3);letter-spacing:.08em}
.vibe .codepanel .target .now{color:var(--fg);min-width:11ch;font-weight:700;transition:opacity .26s ease}
.vibe .codepanel .target .ok{color:var(--accent-2);letter-spacing:.04em}
.vibe .codepanel .target .pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:vibePulse 1.8s infinite}
.vibe .panel-cap{margin-top:1rem;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg-3)}
.vibe .panel-cap b{color:var(--fg-2);font-weight:400}
@keyframes vibePulse{0%{box-shadow:0 0 0 0 rgba(232,155,92,.55)}70%{box-shadow:0 0 0 7px rgba(232,155,92,0)}100%{box-shadow:0 0 0 0 rgba(232,155,92,0)}}

/* ---- cards / chips ---- */
.vibe .vcard{background:var(--bg-card);border:1px solid var(--line-2);border-radius:8px;box-shadow:var(--shadow);padding:1.7rem 1.6rem}
.vibe .vcard h3{font-size:1.15rem;margin-bottom:.55rem}
.vibe .vcard p{font-size:.97rem;color:var(--fg-2)}
.vibe .vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
.vibe .chip{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;line-height:1.5;padding:.45rem .75rem;border-radius:2px;border:1px solid var(--accent);color:var(--accent);display:inline-block}
.vibe .stacknames{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:.4rem}
.vibe .stacknames .s{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--fg);border:1px solid var(--line-2);padding:.45rem .8rem;border-radius:2px}

/* ---- two-column helpers ---- */
.vibe .two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem)}
.vibe .cols{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);margin-top:2.4rem;align-items:start}

/* ---- CTA button (filled accent) ---- */
.vibe .talkbtn{display:inline-flex;align-items:center;gap:.6rem;margin-top:2rem;font-family:var(--mono);font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:#1a0f08;text-decoration:none;border:1px solid var(--accent);padding:.9rem 1.6rem;border-radius:2px;background:var(--accent);transition:background .2s,color .2s}
.vibe .talkbtn:hover,.vibe .talkbtn:focus-visible{background:transparent;color:var(--accent)}

/* ---- scroll reveal ---- */
.vibe .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.vibe .reveal.in{opacity:1;transform:none}

@media (max-width:880px){
  .vibe .hero-grid{grid-template-columns:1fr;gap:2.6rem}
  .vibe .two{grid-template-columns:1fr;gap:1.2rem}
  .vibe .cols{grid-template-columns:1fr}
  .vibe .vgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .vibe .reveal{opacity:1;transform:none;transition:none}
  .vibe .codepanel .target .pulse{animation:none}
}