/* ==========================================================================
   Services — the ink stack. Signature element.

   Only one thing on this page blends: .gx-plate__seam. Plate backgrounds are
   opaque so text contrast is never at the mercy of what is underneath.
   ========================================================================== */

/* Do not constrain this in `ch`. The unit resolves against the container's
   own font, which is the 17px body serif, so 22ch produced a 200px column
   and broke the display headline to one word per line. Measure in rem and
   let the headline set its own rhythm. */
.gx-stack__head {
  margin-block-end: var(--gx-space-xl);
  max-inline-size: min(100%, 44rem);
}

.gx-stack__head .gx-label { margin-block-end: var(--gx-space-s); }
.gx-stack__head h2 { text-wrap: balance; }

.gx-stack__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each plate pins slightly lower than the last, so the stack reads as a
   physical pile of sheets rather than a single swapping panel. */
.gx-stack__item {
  position: sticky;
  inset-block-start: calc(5.5rem + (var(--gx-plate-i) * var(--gx-plate-offset)));
  padding-block-end: var(--gx-space-l);
}

.gx-plate {
  position: relative;
  overflow: hidden;
  border-radius: var(--gx-radius-plate);
  padding: var(--gx-space-l) var(--gx-space-m) var(--gx-space-m);
  transform-origin: center top;
  transition:
    transform var(--gx-dur-expr) var(--gx-ease-enter),
    opacity   var(--gx-dur-expr) var(--gx-ease-enter);
  will-change: transform;
}

/* Outgoing plate dips as the next one slides over it. */
.gx-plate.is-under {
  transform: scale(var(--gx-plate-scale));
  opacity: var(--gx-plate-opacity);
}

/* --- Inks ---------------------------------------------------------------- */

.gx-plate--press     { background: var(--gx-press);     color: var(--gx-paper); }
.gx-plate--paper     { background: var(--gx-paper);     color: var(--gx-ink); box-shadow: inset 0 0 0 var(--gx-hairline) color-mix(in srgb, var(--gx-ink) 22%, transparent); }
.gx-plate--turmeric  { background: var(--gx-turmeric);  color: var(--gx-ink); }
.gx-plate--overprint { background: var(--gx-overprint); color: var(--gx-paper); }

/* --- The overprint seam --------------------------------------------------
   A band at the leading edge of each plate. It multiplies against whatever
   is beneath, so the moment one ink crosses another the overlap resolves to
   a computed third colour instead of a drop shadow. Sits above the plate
   fill but below the content, and the content has enough top padding that
   no text ever falls inside it.
   ------------------------------------------------------------------------- */

.gx-plate__seam {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 96px;
  background: linear-gradient(to bottom, var(--gx-ink) 0%, transparent 100%);
  mix-blend-mode: multiply;
  opacity: 0.42;
  pointer-events: none;
}

/* The first plate has nothing underneath it to overprint against. */
.gx-stack__item:first-child .gx-plate__seam { opacity: 0; }

@supports not (mix-blend-mode: multiply) {
  .gx-plate__seam { background: var(--gx-overprint); opacity: 0.18; }
}

/* --- Registration marks --------------------------------------------------
   Four corner marks, 10px. The only place the press metaphor is stated
   literally, and the reason the visible-grid idea was cut from the plan.
   ------------------------------------------------------------------------- */

.gx-plate__reg {
  position: absolute;
  inline-size: 10px;
  block-size: 10px;
  opacity: 0.45;
  pointer-events: none;
}

.gx-plate__reg::before,
.gx-plate__reg::after {
  content: "";
  position: absolute;
  background: currentColor;
}

.gx-plate__reg::before { inset-block-start: 50%; inset-inline: 0; block-size: 1px; }
.gx-plate__reg::after  { inset-inline-start: 50%; inset-block: 0; inline-size: 1px; }

.gx-plate__reg--tl { inset-block-start: 14px; inset-inline-start: 14px; }
.gx-plate__reg--tr { inset-block-start: 14px; inset-inline-end: 14px; }
.gx-plate__reg--bl { inset-block-end: 14px; inset-inline-start: 14px; }
.gx-plate__reg--br { inset-block-end: 14px; inset-inline-end: 14px; }

/* --- Plate content -------------------------------------------------------- */

.gx-plate__body {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gx-space-m);
}

.gx-plate__n {
  font-family: var(--gx-font-utility);
  font-size: var(--gx-size-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  margin: 0;
  opacity: 0.7;
}

.gx-plate__title {
  font-family: var(--gx-font-display);
  font-size: var(--gx-size-display-m);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-transform: lowercase;
  margin: 0 0 var(--gx-space-s);
}

.gx-plate__title a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size var(--gx-dur-std) var(--gx-ease-enter);
}

.gx-plate__title a:hover,
.gx-plate__title a:focus-visible { background-size: 100% 2px; }

.gx-plate__value {
  font-size: var(--gx-size-lead);
  line-height: 1.45;
  max-inline-size: 34ch;
  margin: 0 0 var(--gx-space-m);
  opacity: 0.92;
}

.gx-plate__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gx-space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Paired panel --------------------------------------------------------- */

.gx-plate__panel {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--gx-radius-image);
  overflow: hidden;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Halftone screen, same idea as the hero plate. */
.gx-plate__screen {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at center, currentColor 1px, transparent 1.15px);
  background-size: 7px 7px;
  opacity: 0.3;
}

.gx-plate--press .gx-plate__reg,
.gx-plate--overprint .gx-plate__reg { opacity: 0.55; }

/* Focus must stay visible on every ink. */
.gx-plate--press :focus-visible,
.gx-plate--overprint :focus-visible { outline-color: var(--gx-turmeric); }
.gx-plate--turmeric :focus-visible,
.gx-plate--paper :focus-visible { outline-color: var(--gx-ink); }

/* --- Reduced motion ------------------------------------------------------
   The signature is removed rather than broken: four flat plates in a plain
   vertical list, correct numbering, equal weight, no pinning or blending.
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .gx-stack__item { position: static; }
  .gx-plate { transform: none !important; opacity: 1 !important; }
  .gx-plate__seam { display: none; }
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (min-width: 48rem) {
  .gx-plate { padding: var(--gx-space-xl) var(--gx-space-l) var(--gx-space-l); }
}

@media (min-width: 64rem) {
  .gx-stack__head { max-inline-size: min(100%, 52rem); }

  .gx-plate__body {
    grid-template-columns: 5rem 1fr 22rem;
    align-items: start;
    gap: var(--gx-space-l);
  }

  .gx-plate__panel { aspect-ratio: 4 / 3; }
}