/* ==========================================================================
   Case-study re-skin: maps the original (light) case-study styles onto the
   new nickcoma.io template (black + cream "primary" #DEDBC8, Almarai +
   Instrument Serif). Loaded AFTER each page's inline <style>, so it overrides
   the variables and a handful of components. The pages are variable-driven,
   so redefining :root re-themes the whole page.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --bg: #000000;
  --bg-card: #121212;
  --bg-card-hover: #1a1a1a;
  --bg-dark: #dedbc8;          /* "accent fill" → cream pill */
  --text: #e1e0cc;            /* primary cream text */
  --text-2: rgba(225, 224, 204, 0.66);
  --text-3: rgba(225, 224, 204, 0.42);
  --text-inv: #0a0a0a;        /* text on cream fills */
  --accent: #e1e0cc;
  --border: rgba(255, 255, 255, 0.1);
  --border-h: rgba(255, 255, 255, 0.18);
  --font: 'Almarai', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Almarai', sans-serif;
}

html,
body {
  background: var(--bg) !important;
  color: var(--text);
}
::selection {
  background: var(--bg-dark);
  color: var(--text-inv);
}

/* Scroll progress bar → cream */
.scroll-bar {
  background: var(--accent);
}

/* ── HEADER: centered black pill, matching the homepage nav ── */
.hp-nav-pill {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  z-index: 100;
  display: none;
  align-items: center;
  gap: 44px;
  background: #000;
  padding: 12px 32px;
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
@media (min-width: 768px) {
  .hp-nav-pill { display: flex; }
}
.hp-nav-pill a {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(225, 224, 204, 0.8);
  transition: color 0.2s;
}
.hp-nav-pill a:hover {
  color: #e1e0cc;
}

.hp-nav-burger {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  height: 44px;
  width: 44px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #e1e0cc;
  cursor: pointer;
}
.hp-nav-burger svg {
  width: 20px;
  height: 20px;
}
@media (min-width: 768px) {
  .hp-nav-burger { display: none; }
}

/* Mobile full-screen menu (matches homepage) */
.nav-mobile {
  z-index: 200 !important;
  background: rgba(0, 0, 0, 0.96) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.nav-mobile a {
  color: var(--text) !important;
  font-size: 28px;
}
.nav-mobile a:hover {
  color: var(--text-2) !important;
}
.nav-mobile-close svg {
  color: var(--text);
}

/* ── Headline accent words → Instrument Serif italic (the new template look) ── */
.cs-hero h1 em,
.cs-section-title em,
.cs-next a em {
  font-family: 'Instrument Serif', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--text-2);
}

/* Soften heading weight toward the new template's refined feel */
.cs-hero h1 {
  font-weight: 500;
  letter-spacing: -0.03em;
}
.cs-section-title {
  font-weight: 500;
}

/* Image / card surfaces sit on the dark panel color */
.cs-hero-img,
.cs-img,
.cs-img-placeholder,
.cs-highlight,
.cs-callout,
.cs-persona-img {
  background: var(--bg-card);
}
.cs-callout {
  border-left: 3px solid var(--accent);
}
.cs-persona-img {
  border: 2px solid var(--border);
}

/* Architecture diagram (repointel): the nodes had a hardcoded white
   background, which left cream text unreadable on the dark page. */
.arch-node {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border);
  color: var(--text);
}
.arch-node:hover {
  border-color: var(--border-h);
}
.arch-node-dark {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* Links inside prose / inline cards that used hardcoded light cards */
.cs-two-col a[style],
.cs-prose a {
  color: var(--text);
}

/* Footer */
.foot-links a:hover {
  color: var(--text);
}

/* Bottom "back" button, styled like the homepage "Get in touch" CTA.
   The selectors are scoped under .cs-next to win over the old (huge)
   .cs-next a next-project link style. */
.cs-next .cs-next-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #000;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  border: none;
  border-radius: 9999px;
  padding: 6px 24px 6px 6px;
  transition: gap 0.25s var(--ease), background 0.25s var(--ease);
}
.cs-next .cs-next-back:hover {
  gap: 14px;
  background: #ffffff;
  color: #000;
}
.cs-next .cs-next-back-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  background: #000;
  color: #e1e0cc;
  flex-shrink: 0;
}
.cs-next .cs-next-back-icon svg {
  width: 18px;
  height: 18px;
}