/* Page field — one continuous journey down the whole document: obsidian, up through
   atlantic, into a luminous warm peak, then settling back to obsidian. Dark → light →
   dark, and the peak is warm bronze-bone, never white; white is reserved for type.

   Built in layers so the peak can move: the base traverse is symmetric dark→atlantic→
   dark, and ALL the warmth and light comes from two bronze blooms positioned at
   --se-peak, which shared.jsx measures per page from the actual light section. */

:root { --se-peak: 80%; }

body {
  background-color: var(--solaseye-obsidian);
  background-image:
    /* inner warm luminance — the light end of the journey */
    radial-gradient(152% 30% at 50% var(--se-peak),
      rgba(216,196,158, .34) 0%,
      rgba(201,149,85, .18) 38%,
      rgba(8,9,16, 0) 74%),
    /* outer bronze spread, wider and softer, so the peak has depth rather than an edge */
    radial-gradient(190% 54% at 50% var(--se-peak),
      rgba(163,118,63, .18) 0%,
      rgba(122,85,39, .09) 44%,
      rgba(8,9,16, 0) 78%),
    /* base traverse */
    linear-gradient(180deg,
      #080910 0%,
      #0a1219 13%,
      #0e2530 29%,
      #123842 45%,
      #17495a 57%,
      #123842 70%,
      #0c1a22 84%,
      #0a1017 94%,
      #080910 100%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url(assets/patterns/field-pattern.png) center / 640px repeat;
  opacity: .07;
}

#root { position: relative; z-index: 1; }

/* Small amber type sits on a warmed, layered bone rather than the flat token, so it
   is darkened here to keep clear of AA. */
.se-light { --amber-ink: #6E4A20; }

/* ---------- Mobile refinements ---------- */
/* Never allow sideways scroll on small screens. */
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 640px) {
  /* Multi-column enquiry fields stack so labels + inputs have room to breathe. */
  form fieldset > div { grid-template-columns: minmax(0, 1fr) !important; }

  /* Any hard-coded auto-fit card rows collapse to a single column. */
  [style*="repeat(auto-fit"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Tighten oversized display type a touch so headlines don't overflow. */
  :root {
    --type-hero-size: clamp(3rem, 13vw, 4rem);
    --type-display-size: clamp(2.25rem, 9vw, 3rem);
    --type-h1-size: 2.5rem;
    --type-h2-size: 2rem;
    --type-h3-size: 1.6rem;
  }

  /* Images and media never exceed their column. */
  img, svg, video { max-width: 100%; height: auto; }
}