/* =============================================================
   Crushers & Equipment — holding page
   Notes
   - Typography: target is Arboria Bold (Adobe Fonts). Mulish is
     loaded as a close geometric-sans fallback until the client
     supplies an Adobe Fonts kit. When that arrives, swap the
     `font-family` stack below to lead with the kit's family name.
   - Layout: mobile-first. The dome is a CSS-shaped block that
     reflows from a wide, shallow dome on desktop into a taller,
     more rounded dome on small screens so the headline always
     reads inside the curve.
   ============================================================= */

:root {
  /* Brand palette (sampled from the supplied design + logo) */
  --green-dome: #235e38;

  /* Rainbow arc trim — matches the dot arc inside the logo */
  --arc-orange: #e88c2f;
  --arc-blue: #2e6cba;
  --arc-green: #4ea946;

  --ink: #1a1a1a;
  --paper: #ffffff;
  --rocks-tint: #efefef;

  --font-display: "Arboria", "Mulish", "Montserrat", "Helvetica Neue", Arial,
    system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  background: var(--rocks-tint);
  /* Smoother text on light backgrounds */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font-display);
  color: var(--ink);
  background-color: var(--rocks-tint);
  background-image: url("assets/rocks-backdrop.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* fixed gives a subtle parallax-y feel on desktop without being heavy */
  background-attachment: fixed;
  overflow-x: hidden;
}

/* iOS Safari: background-attachment: fixed is buggy + costly. */
@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

/* ---------- page shell ---------- */

.page {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  /* No horizontal padding on .page — the dome needs to run edge-to-edge.
     Individual children (e.g. the header) apply their own gutter. */
  padding: clamp(20px, 5vw, 48px) 0 0;
}

.page__header {
  width: 100%;
  display: flex;
  justify-content: center;
  /* Header owns the side gutter so text/logo never touches the screen edge. */
  padding: clamp(16px, 6vh, 64px) clamp(16px, 4vw, 40px)
    clamp(16px, 4vh, 40px);
}

.logo {
  display: block;
  /* The source PNG is 6250×6250 with the actual wordmark occupying a
     6100×1890 band roughly centred in the file. We render the IMG box
     at the band's aspect (~3.228:1) and use object-fit to crop the
     transparent padding above and below. The file itself is untouched. */
  width: clamp(240px, 32vw, 520px);
  aspect-ratio: 6100 / 1890;
  height: auto;
  object-fit: cover;
  /* Vertical anchor sampled from the source PNG: visible logo centre
     sits at ~47% of image height, not 50%. */
  object-position: 50% 47%;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- dome ---------- */

.dome {
  /* The dome is the rainbow trim band; the inner is the green panel.
     Stacking a slightly larger rainbow-coloured dome under a green
     dome leaves a thin coloured sliver visible along the curved top. */
  position: relative;
  margin-top: auto; /* sticks the dome to the bottom of the viewport */
  width: 100%;
  padding-top: 10px; /* thickness of the visible rainbow trim */
  background: linear-gradient(
    90deg,
    var(--arc-orange) 0%,
    var(--arc-orange) 18%,
    var(--arc-blue) 50%,
    var(--arc-green) 82%,
    var(--arc-green) 100%
  );
  /* Wide, shallow dome on large screens.
     The y-radius (after the slash) controls dome height/flatness. */
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  /* Anchor the dome height to the viewport so the visual ratio of
     dome-to-page roughly matches the design reference (≈55%).
     Capped so tall portrait viewports (tablets, foldables) don't end
     up with an over-stretched dome and a hollow centre. */
  min-height: clamp(380px, 52vh, 580px);
  display: flex;
  flex-direction: column;
}

.dome__inner {
  position: relative;
  background: var(--green-dome);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  /* Top padding sits the headline just below the dome's curve.
     Bottom padding gives the body copy breathing room at the base. */
  padding: clamp(80px, 22vh, 220px) clamp(20px, 6vw, 80px)
    clamp(48px, 9vh, 96px);
  color: var(--paper);
  text-align: center;
  flex: 1 1 auto;
  /* Match the dome's outer curve so the rainbow shows only as the trim. */
}

.dome__content {
  max-width: 860px;
  margin: 0 auto;
}

.headline {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(22px, 3.6vw, 40px);
  line-height: 1.15;
  color: var(--paper);
  /* Keep the title on one line where it fits (design intent). */
  text-wrap: balance;
}

.subhead {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(11px, 1.35vw, 15px);
  line-height: 1.7;
  color: var(--paper);
}

/* ---------- responsive tuning ---------- */

/* Tablet & smaller: make the dome a touch deeper so the curve still
   reads as a "dome" and the copy sits comfortably inside it. */
@media (max-width: 900px) {
  .dome,
  .dome__inner {
    border-radius: 50% 50% 0 0 / 22% 22% 0 0;
  }
}

/* Phone portrait: tall, more rounded dome.
   Logo sits higher; text gets a touch more breathing room. */
@media (max-width: 600px) {
  .page__header {
    padding-top: clamp(12px, 3vh, 32px);
    padding-bottom: clamp(12px, 2.5vh, 24px);
  }

  .dome,
  .dome__inner {
    border-radius: 50% 50% 0 0 / 18% 18% 0 0;
  }

  .dome {
    /* Slightly thicker rainbow trim reads better at small sizes. */
    padding-top: 8px;
  }

  .dome__inner {
    padding: clamp(64px, 14vh, 140px) 20px clamp(40px, 8vh, 64px);
  }

  .subhead br {
    /* Allow the two lines of body copy to wrap naturally on narrow
       screens rather than forcing the original line breaks. */
    display: none;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .headline {
    font-size: 22px;
    letter-spacing: 0.03em;
  }

  .subhead {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}

/* Short / landscape phones: shrink vertical spacing so the dome
   doesn't push content off-screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .page__header {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .logo {
    width: clamp(180px, 28vw, 320px);
  }

  .dome__inner {
    padding-top: clamp(40px, 9vh, 80px);
    padding-bottom: clamp(20px, 5vh, 48px);
  }
}

/* Reduced motion / contrast considerations — nothing animates here,
   but make sure the page remains legible in forced-colors mode. */
@media (forced-colors: active) {
  .dome,
  .dome__inner {
    border: 1px solid CanvasText;
  }
}