/* =========================================================================
   Moonbow Colors — holding page
   A responsive rebuild of the key art
   (page website moonbow colors and CW.pdf). Nothing on the page that is
   not on that artboard.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand colours, sampled from the source artwork */
  --ink:    #000000;   /* black field                */
  --blush:  #FBEAF1;   /* pink field                 */
  --moon:   #BFC7C0;   /* MOONBOW wordmark grey      */
  --iris:   #7170FA;   /* "in association with" blue */
  --lime:   #D6EE13;   /* COLORS lime                */
  --amber:  #E69824;   /* Colorwise dot              */

  /* Mukta is the artwork's own text face. */
  --font-body: "Mukta", "Gill Sans", "Segoe UI", system-ui, sans-serif;

  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --pad-y: clamp(1.25rem, 4vh, 3.5rem);
  --edge:  clamp(1.5rem, 7vw, 3.5rem);   /* depth of the diagonal cut, small screens */

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset ----------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(.875rem, .82rem + .28vw, 1.0625rem);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

ul { margin: 0; padding: 0; list-style: none; }

p { margin: 0; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--iris);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------- 3. The diagonal field ---------------------------------------- */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--blush);
  pointer-events: none;
}

/* Desktop only — on small screens the black area is drawn by `.brand`,
   so it always wraps its own content. */
.field__ink { display: none; }

/* ---------- 4. Stage ----------------------------------------------------- */

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: clamp(1.5rem, 5vh, 3.5rem);
  padding: max(var(--pad-y), env(safe-area-inset-top))
           max(var(--pad-x), env(safe-area-inset-right))
           max(var(--pad-y), env(safe-area-inset-bottom))
           max(var(--pad-x), env(safe-area-inset-left));
}

/* ---------- 5. Moonbow lockup -------------------------------------------- */
/* On small screens the mark's own block carries the black field and the
   diagonal cut, so the split can never fall in the wrong place. */

.brand {
  position: relative;
  margin: calc(var(--pad-y) * -1) calc(var(--pad-x) * -1) 0;
  padding: max(var(--pad-y), env(safe-area-inset-top))
           var(--pad-x)
           calc(var(--pad-y) + var(--edge));
  background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--edge)), 0 100%);
  font-size: inherit;
  font-weight: inherit;
}

.brand__lockup { width: clamp(11rem, 58vw, 22rem); }

/* ---------- 6. In association with / Studio Colorwise -------------------- */

.partner {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.75rem, 3vw, 2rem) clamp(1.25rem, 5vw, 3rem);
}

.assoc { flex: 1 0 100%; }
.assoc img { width: clamp(9.5rem, 46vw, 19.25rem); }

.partner__link {
  display: block;
  transition: opacity .35s var(--ease);
}

.partner__link:hover { opacity: .72; }

.partner__lockup { width: clamp(8rem, 38vw, 13.875rem); }

/* ---------- 7. Contact --------------------------------------------------- */

.contact {
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(1rem, 2.5vh, 2rem) clamp(1.5rem, 6vw, 5rem);
}

.contact__group {
  display: flex;
  flex-direction: column;
  gap: clamp(.4rem, 1.4vh, .9375rem);
}

.contact__item {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.contact__icon { flex: none; }
.contact__icon--plane  { width: clamp(1.35rem, 3.4vw, 1.75rem); }
.contact__icon--phone  { width: clamp(1rem, 2.4vw, 1.25rem); }
.contact__icon--social { width: clamp(1.5rem, 3.6vw, 1.85rem); }

.contact__stack {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.contact__seal { width: clamp(2.5rem, 7vw, 3.5rem); }

.contact__link { position: relative; }

.contact__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}

.contact__link:hover::after,
.contact__link:focus-visible::after { transform: scaleX(1); }

.contact__link--social {
  display: flex;
  align-items: center;
  gap: .625rem;
}

.contact__link--social::after { left: 2.45rem; width: calc(100% - 2.45rem); }

/* ---------- 8. Large phones ---------------------------------------------- */

@media (min-width: 34em) {
  .contact { flex-wrap: nowrap; justify-content: space-between; }
}

/* ---------- 9. Tablets & landscape phones -------------------------------- */
/* Enough width for the artwork's reading order: "in association with"
   leads into the Colorwise mark on one right-aligned line. */

@media (min-width: 48em) {
  .partner {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: clamp(1.25rem, 4vw, 3rem);
  }

  .assoc { flex: 0 1 auto; }
  .assoc img       { width: clamp(9rem, 26vw, 19.25rem); }
  .partner__lockup { width: clamp(8rem, 19vw, 13.875rem); }
}

/* ---------- 10. Desktop: the real diagonal ------------------------------- */

@media (min-width: 64em) {

  /* The artwork's split is the plain anti-diagonal of the canvas:
     black above-left, blush below-right. */
  .field__ink {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 0 100%);
  }

  .stage { gap: clamp(2rem, 5vh, 4rem); }

  /* The mark sits in the wide top-left of the wedge, as on the artboard. */
  .brand {
    align-self: start;
    margin: 0;
    padding: 0;
    background: none;
    clip-path: none;
  }

  /* Widths are the artwork's own proportions of the canvas:
     lockup 45.8%, "in association with" 36.6%, Colorwise mark 26.4%,
     trimmed just enough to keep every mark clear of the diagonal on
     16:9 screens, which are steeper than the 1.41:1 artboard. */
  /* The vh terms keep the marks from ever pushing the contact block off
     the bottom of a short window. */
  .brand__lockup { width: max(17rem, min(40vw, 52vh, 46rem)); }

  .partner {
    justify-content: flex-end;
    gap: 6vw;
    /* Lands the Colorwise mark's right edge at 90.5% of the canvas,
       as on the artboard. */
    margin-right: max(0px, calc(9.5vw - var(--pad-x)));
  }

  .assoc img       { width: max(11rem, min(33vw, 34rem)); }
  .partner__lockup { width: max(9rem, min(24vw, 30vh, 25rem)); }

  .contact {
    /* The blush field only clears the left edge near the bottom corner,
       so the contact block is inset — exactly as it is in the artwork. */
    padding-left: clamp(4rem, 14vw, 13rem);
  }

  .contact__seal { width: clamp(2.75rem, 3.6vw, 4rem); }
}

/* ---------- 11. Wide but short desktops ---------------------------------- */
/* 1200x630, 1366x640, split-screen monitors: the diagonal climbs fast, so
   the marks come down a step to stay inside their own field. */

@media (min-width: 64em) and (max-height: 44rem) {
  .brand__lockup   { width: clamp(13rem, 26vw, 24rem); }
  .assoc img       { width: clamp(9rem, 21vw, 20rem); }
  .partner__lockup { width: clamp(8rem, 15vw, 15rem); }
  .partner         { gap: 4vw; }
  .contact         { padding-left: clamp(3rem, 11vw, 10rem); }
}

/* ---------- 12. Short viewports ------------------------------------------ */

@media (max-height: 34rem) {
  :root {
    --pad-y: clamp(.875rem, 3vh, 1.75rem);
    --edge:  clamp(1.25rem, 5vw, 2.5rem);
  }

  .stage           { gap: clamp(.875rem, 2.5vh, 1.75rem); }
  .brand__lockup   { width: clamp(7rem, 18vw, 11rem); }
  .partner__lockup { width: clamp(7rem, 13vw, 10rem); }
  .assoc img       { width: clamp(8rem, 18vw, 14rem); }
  .contact__seal   { width: clamp(2.25rem, 3.5vw, 3rem); }

  /* Fold the contact block into single lines so it still lands on screen. */
  .contact__group {
    flex-direction: row;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
  }

  .contact__item { flex: none; }
  .contact__link { white-space: nowrap; }
}

/* ---------- 13. Entrance ------------------------------------------------- */

.reveal   { animation: rise .9s var(--ease) both; }
.reveal--2 { animation-delay: .12s; }
.reveal--3 { animation-delay: .24s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 14. Motion & print preferences ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .field { position: absolute; }
}