/* /site-mood.css
   Adds atmospheric depth to the dark mood across every page.
   Loaded AFTER each page's inline <style> so it overrides the flat body bg.

   - Soft warm-ink at the top, slightly cooler deeper-ink at the bottom.
   - Subtle radial highlight emanating from above the viewport — gives a
     "moonlight from above" feel without breaking the editorial minimalism.
   - background-attachment: fixed keeps the gradient anchored to the viewport
     so the eye gets a different region as you scroll, never one flat plane.

   Never reads as a gradient effect; reads as "the room has depth". */

/* Paint the gradient on BOTH html and body so the viewport always shows it,
   regardless of body min-height behavior. !important so it overrides the
   inline `html, body { background: var(--ink); }` rule on every page.

   Three stacked layers (top to bottom in the cascade):
     1. Warm "moonlight" radial — soft amber-ivory spot at top center.
     2. Side vignette — slightly darker at the left/right edges to frame
        the content and add room-depth.
     3. Top-to-bottom warmth — a hearth-glow brown at the very top fading
        through ink to a cooler deep at the foot of the page.
   The end result reads like a candlelit room, not a black void. */
html,
body {
  background:
    /* Top hearth-glow — warm amber spotlight from above, much stronger. */
    radial-gradient(ellipse 1400px 850px at 50% -4%,
      rgba(255, 220, 170, 0.20) 0%,
      rgba(255, 220, 170, 0.08) 25%,
      rgba(255, 220, 170, 0)    60%),
    /* Side / corner vignette — frames the page like a room with walls. */
    radial-gradient(ellipse 130% 110% at 50% 50%,
      rgba(0, 0, 0, 0)          45%,
      rgba(0, 0, 0, 0.55)       100%),
    /* Top-to-bottom warm-to-cool — pronounced hearth at top, deep cool ground. */
    linear-gradient(180deg,
      #3A2A18 0%,
      #261C12 14%,
      #14110D 38%,
      #0A0908 70%,
      #030305 100%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* Top-of-page sections that previously painted a solid var(--ink) over
   the body now sit transparent so the gradient is actually visible.
   Specificity tie + later in cascade beats the inline rules; !important
   on these handles any inline-style attributes too. */
.hero,
.bleed-section,
.how,
.brief-hero-runway,
section.hero,
section.bleed-section {
  background: transparent !important;
  background-color: transparent !important;
}

/* Cream-paper sections deliberately invert the mood (legal contracts).
   Don't apply the dark gradient where the page is intentionally cream. */
body.paper {
  background: #F4EFE6;
  background-attachment: scroll;
}

/* Mobile: scale ellipses + slightly soften vignette for narrow viewports. */
@media (max-width: 720px) {
  html,
  body {
    background:
      radial-gradient(ellipse 800px 600px at 50% -3%,
        rgba(255, 220, 170, 0.18) 0%,
        rgba(255, 220, 170, 0.06) 28%,
        rgba(255, 220, 170, 0)    60%),
      radial-gradient(ellipse 140% 110% at 50% 50%,
        rgba(0, 0, 0, 0)          55%,
        rgba(0, 0, 0, 0.45)       100%),
      linear-gradient(180deg,
        #382818 0%,
        #241B12 16%,
        #14110D 42%,
        #0A0908 72%,
        #030305 100%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
  }
}

/* ============================================================
   Chrome / topbar brand mark — doubled so the logo reads as
   a confident brand mark, not a tiny corner-mark afterthought.
   Covers every chrome variant used across the site:
     - <a class="left"><img></a>                    (valuation, buyers, match, brief)
     - <div class="left"><a class="brand-mark">     (dashboards, ai-pilot, match-agreement, contracts)
     - <header class="chrome"><a class="brand">     (index, join, account-billing, edit-profile)
     - <header class="top-bar"><a class="brand">    (signin, pro)
     - <a><img class="logo">                        (how-it-works)
   ============================================================ */
.chrome .left .brand-mark img,
.chrome .left img,
.chrome a.left img,
.chrome a.brand-mark img,
.chrome a.brand img,
.chrome .logo,
.chrome img.logo,
.top-bar .left .brand-mark img,
.top-bar a.brand img,
.top-bar .logo,
.top-bar img.logo,
.topbar .left .brand-mark img,
.topbar .left img {
  height: 48px;
  width: auto;
  display: block;
}

/* Let the chrome row grow to fit the taller mark. The original 24-26px
   fixed-height constraints become min-height so spacing stays comfortable
   without clipping the logo. */
.chrome .left,
.chrome a.left,
.chrome a.brand,
.top-bar .left,
.top-bar a.brand,
.topbar .left {
  height: auto;
  min-height: 48px;
  align-items: center;
}

/* Mobile: scale back slightly so the bar isn't dominated by the mark. */
@media (max-width: 720px) {
  .chrome .left .brand-mark img,
  .chrome .left img,
  .chrome a.left img,
  .chrome a.brand-mark img,
  .chrome a.brand img,
  .chrome .logo,
  .chrome img.logo,
  .top-bar .left .brand-mark img,
  .top-bar a.brand img,
  .top-bar .logo,
  .top-bar img.logo,
  .topbar .left .brand-mark img,
  .topbar .left img {
    height: 40px;
  }
  .chrome .left,
  .chrome a.left,
  .chrome a.brand,
  .top-bar .left,
  .top-bar a.brand,
  .topbar .left {
    min-height: 40px;
  }
}