/* ═══════════════════════════════════════════════════════════════════
   redesign-overrides.css — reskin of journal.html + project.html
   to the future.css design language (ivory / carbon / magenta,
   Fraunces 900 mega headings, Montserrat body, JetBrains Mono labels,
   Homemade Apple script accents).
   Loaded AFTER the inline <style> in each page head.
   This file changes skin only (type, palette, borders, radii); the
   JSX layout and content structure are untouched.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --r-ivory: #efeae0;
  --r-carbon: #221a1d;
  --r-merlot: #6b1a35;
  --r-magenta: #bc2a4e;
  --r-lilac: #c5a4be;
  --r-indigo: #27557e;
  --r-indigo-deep: #1d3f5e;
}

/* The page JSX injects --accent / --muted / --rule as inline styles on
   <html>; !important here outranks those inline (non-important) values. */
html {
  --accent: #bc2a4e !important;
  --accent-text: #221a1d !important;
  --muted: rgba(34, 26, 29, 0.55) !important;
  --rule: rgba(34, 26, 29, 0.14) !important;
}

/* ── Page ground ──────────────────────────────────────────────────── */
html, body {
  background: var(--r-ivory) !important;
  color: var(--r-carbon) !important;
}
::selection { background: var(--r-magenta) !important; color: var(--r-ivory) !important; }
.c1-stage::-webkit-scrollbar-thumb { background: rgba(34, 26, 29, 0.25) !important; }

/* ── Type system ──────────────────────────────────────────────────── */
/* Editorial serif blocks (statement paragraphs, marquee title, etc.) */
.c1-stage .noir-display {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: 'opsz' 144;
}
.c1-stage p.noir-display { color: var(--r-carbon) !important; }

/* Mono labels: keep JetBrains Mono, drop the italic posture */
.c1-stage .noir-caps { font-style: normal !important; }

/* Body copy → Montserrat, carbon */
.c1-stage p {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  color: rgba(34, 26, 29, 0.8) !important;
}
.c1-stage p.noir-display { font-family: 'Fraunces', Georgia, serif !important; }

/* Biggest headings: Fraunces 900, uppercase, tight (like .mega) */
#root .c1-stage h1,
#root .c1-stage h2 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 900 !important;
  font-style: normal !important;
  font-variation-settings: 'opsz' 144;
  text-transform: uppercase;
  letter-spacing: -0.015em !important;
  line-height: 0.92 !important;
}
#root .c1-stage h1 span,
#root .c1-stage h2 span { font-style: normal !important; }

/* Journal masthead wordmark: uppercase 900 needs a slightly smaller clamp
   than the old italic 300 to stay on one line. This selector also happens
   to match article.html's headline (also a <header><h1>) — that's existing
   behavior, left as-is. */
#root .c1-stage header h1 { font-size: clamp(44px, 9.4vw, 150px) !important; }

/* Project page title only, ~15% smaller than the rule above — more
   specific selector so article.html's headline is unaffected. */
#root .c1-stage header h1.c1-project-title { font-size: clamp(37px, 8vw, 128px) !important; }

/* Other headings: Fraunces 500 (like .display / card titles) */
#root .c1-stage h3,
#root .c1-stage h4 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  font-variation-settings: 'opsz' 144;
  letter-spacing: -0.005em !important;
}

/* Script accent: project hero subtitle + related-project card tagline —
   these are <p> tags, so the generic ".c1-stage p" body-copy rule above
   would otherwise stomp their inline script font + accent color. */
.c1-stage p.c1-project-subtitle {
  font-family: 'Homemade Apple', cursive !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--r-magenta) !important;
}
.c1-stage p.c1-worklink-tagline {
  font-family: 'Homemade Apple', cursive !important;
  font-style: normal !important;
  text-transform: none !important;
  color: var(--r-lilac) !important;
}
/* Belt-and-suspenders: any inline script-font accent (e.g. the little
   rotated "·" and word flourishes inside the otherwise-uppercase h1/h2
   rule above) inherits text-transform from its ancestor unless told not
   to. Never render the handwriting font in caps, full stop. */
.c1-stage [style*="Homemade Apple"] { text-transform: none !important; }

/* Script accent: masthead tagline under the wordmark */
.c1-stage header > div.noir-caps > span {
  font-family: 'Homemade Apple', cursive !important;
  font-size: 15px;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--r-magenta) !important;
  display: inline-block;
  transform: rotate(-2deg);
}
/* Script accent: accent-colored key word inside editorial lead paragraphs */
.c1-stage p > span[style*="color: rgb(153, 21, 57)"] {
  font-family: 'Homemade Apple', cursive !important;
  font-style: normal !important;
  text-transform: none;
}

/* ── Chrome: logos, cursor, nav ───────────────────────────────────── */
/* Journal masthead logo is a white SVG with no blend mode → make carbon.
   (The project nav logo stays white: its <nav> uses mix-blend difference,
   which already renders it dark on ivory.) */
.c1-stage header img[src*="Chapter"] { filter: brightness(0) opacity(0.88) !important; }

/* Custom cursor ring (outside .c1-stage): was 1px solid ivory */
.c1-custom-cursor > div[style*="border: 1px solid rgb(240, 235, 226)"] {
  border-color: rgba(34, 26, 29, 0.45) !important;
}

/* Project nav: drop the difference blend (too faint on ivory) and set
   solid carbon chrome, like the future.css site-head */
.c1-stage nav { mix-blend-mode: normal !important; }
.c1-stage nav [style*="color: rgb(255, 255, 255)"] { color: var(--r-carbon) !important; }
.c1-stage nav img[src*="Chapter"] { filter: brightness(0) opacity(0.88) !important; }

/* ── Controls ─────────────────────────────────────────────────────── */
.c1-stage button {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  color: var(--r-carbon) !important;
}
.c1-stage input[type="search"] {
  font-family: 'Montserrat', system-ui, sans-serif !important;
  font-style: normal !important;
  color: var(--r-carbon) !important;
}
.c1-stage input::placeholder { color: rgba(34, 26, 29, 0.4); }
.c1-stage form { border-bottom-color: rgba(34, 26, 29, 0.3) !important; }

/* Links: magenta on hover (matches future.css chrome behavior) */
.c1-stage .noir-link:hover { color: var(--r-magenta); opacity: 1; }

/* ── Accent remap: old crimson #991539 → magenta #bc2a4e ─────────── */
.c1-stage [style*="color: rgb(153, 21, 57)"] { color: var(--r-magenta) !important; }
.c1-stage svg[stroke="#991539"] { stroke: var(--r-magenta); }
.c1-stage [style*="border-top: 1px solid rgb(153, 21, 57)"] { border-top-color: var(--r-magenta) !important; }
/* Accent glows behind Next Project / Other Case Studies */
.c1-stage div[style*="radial-gradient(ellipse at 50% 50%, rgba(153, 21, 57"] {
  background: radial-gradient(ellipse at 50% 50%, rgba(188, 42, 78, 0.14), transparent 70%) !important;
}
.c1-stage div[style*="radial-gradient(ellipse at 50% 0%, rgba(153, 21, 57"] {
  background: radial-gradient(ellipse at 50% 0%, rgba(188, 42, 78, 0.1), transparent 60%) !important;
}

/* ── Light-on-dark inline text values → carbon equivalents ────────
   Only the values used on the page ground are remapped; values used
   over imagery (#fff, rgba(255,...), 0.65/0.7 caps in image overlays)
   are deliberately left light. */
.c1-stage [style*="color: rgba(240, 235, 226, 0.35)"] { color: rgba(34, 26, 29, 0.45) !important; }
.c1-stage [style*="color: rgba(240, 235, 226, 0.5)"]  { color: rgba(34, 26, 29, 0.55) !important; }
.c1-stage [style*="color: rgba(240, 235, 226, 0.55)"] { color: rgba(34, 26, 29, 0.55) !important; }
.c1-stage [style*="color: rgba(240, 235, 226, 0.6)"]  { color: rgba(34, 26, 29, 0.62) !important; }
.c1-stage [style*="color: rgba(240, 235, 226, 0.85)"] { color: rgba(34, 26, 29, 0.8) !important; }
.c1-stage [style*="color: rgb(240, 235, 226)"]        { color: var(--r-carbon) !important; }
/* …except headings sitting on image scrims (Other Case Studies cards) */
.c1-stage h3[style*="color: rgb(240, 235, 226)"]      { color: #f0ebe2 !important; }

/* ── Surfaces & radii ─────────────────────────────────────────────── */
/* Playbook cards: near-invisible ivory tint on dark → soft carbon tint */
.c1-stage article[style*="background: rgba(240, 235, 226, 0.02)"] {
  background: rgba(34, 26, 29, 0.035) !important;
  border-radius: 14px;
  overflow: hidden;
}
/* Rounded media frames (new design radii) */
.c1-stage article [style*="overflow: hidden"] { border-radius: 12px; }
.c1-stage article[style*="overflow: hidden"] { border-radius: 14px; }
.c1-stage div[style*="aspect-ratio"] { border-radius: 14px; }

/* Project-page image placeholders: near-black plates → indigo-deep panels
   (matches the showcase / scope media panels in future.css) */
.c1-stage div[style*="aspect-ratio"][style*="rgb(14, 12, 10)"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--r-indigo), var(--r-indigo-deep));
  opacity: 0.92;
  pointer-events: none;
}
