/* Shared finishing layer for Afterlight's public and client-facing surfaces. */
:is(.merch-page, .client-portal-page, .enquiry-page) {
  --surface-ink: #0b0b0b;
  --surface-paper: #edebe7;
  --surface-raised: #f7f4ef;
  --surface-orange: #cc6437;
  --surface-line: #c9c4bc;
  --surface-dark-line: rgba(237, 235, 231, .18);
  font-family: 'Archivo', sans-serif;
}

/* The homepage's near-black space canvas is the public visual source of truth.
   Page-specific brown washes and grids made Merch and Client Portal feel like
   separate sites, so both now sit on the same clean base. */
:is(.merch-page, .client-portal-page) {
  background-color: #0b0b0b !important;
  background-image: none !important;
}

.merch-page .merch-section {
  background-color: #0b0b0b;
  background-image: none;
}

.merch-page .merch-section::before {
  opacity: .22;
  background-image:
    radial-gradient(circle at 14% 22%, rgba(237, 235, 231, .58) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 31%, rgba(204, 100, 55, .72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 76%, rgba(237, 235, 231, .42) 0 1px, transparent 1.5px);
  background-size: 330px 280px, 470px 390px, 610px 510px;
}

.merch-page .merch-signal-shapes {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.merch-page .merch-signal-shapes i {
  position: absolute;
  width: 9px;
  height: 9px;
  display: block;
  border: 1px solid rgba(237, 235, 231, .24);
  opacity: .72;
  transform: rotate(var(--signal-rotation, 0deg));
}

.merch-page .merch-signal-shapes i[data-shape="circle"] {
  border-radius: 50%;
}

.merch-page .merch-signal-shapes i[data-shape="triangle"] {
  width: 10px;
  height: 10px;
  border: 0;
  background: linear-gradient(45deg, transparent 46%, rgba(204, 100, 55, .38) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(204, 100, 55, .38) 47% 53%, transparent 54%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.merch-page .merch-signal-shapes i:nth-child(1) { top: 12%; left: 8%; }
.merch-page .merch-signal-shapes i:nth-child(2) { top: 24%; left: 62%; --signal-rotation: 14deg; }
.merch-page .merch-signal-shapes i:nth-child(3) { top: 17%; right: 7%; --signal-rotation: -8deg; }
.merch-page .merch-signal-shapes i:nth-child(4) { top: 56%; left: 4%; width: 7px; height: 7px; }
.merch-page .merch-signal-shapes i:nth-child(5) { top: 68%; right: 5%; width: 7px; height: 7px; --signal-rotation: 24deg; }
.merch-page .merch-signal-shapes i:nth-child(6) { top: 84%; left: 48%; --signal-rotation: 7deg; }

.client-portal-page::before {
  display: block;
  opacity: .12;
}

:is(.merch-page, .client-portal-page, .enquiry-page) ::selection {
  background: var(--surface-orange);
  color: var(--surface-ink);
}

:is(.merch-page, .client-portal-page, .enquiry-page) :focus-visible {
  outline: 2px solid var(--surface-orange);
  outline-offset: 3px;
}

:is(.merch-page, .client-portal-page, .enquiry-page) :is(.nav-brand strong, h1, h2) {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
}

:is(.merch-page, .client-portal-page, .enquiry-page) .nav-links {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.merch-page .merch-section {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.merch-page .merch-heading h1,
.merch-page .merch-card h2 {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  letter-spacing: -.035em;
}

.merch-page .merch-heading h1 {
  font-size: clamp(3.2rem, 7vw, 6rem);
  line-height: .88;
}

.merch-page .merch-section::before {
  opacity: .42;
}

.client-portal-page .portal-space-field {
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  .merch-page .merch-signal-shapes i {
    transform: none;
  }

  .client-portal-page::before {
    opacity: .075;
    animation: none;
  }
}

.client-portal-page .auth-statement h1 {
  max-width: 10ch;
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  letter-spacing: -.04em;
}

.client-portal-page .login-panel h2,
.client-portal-page .simple-portal :is(h1, h2) {
  font-family: 'Archivo Black', 'Archivo', sans-serif;
  letter-spacing: -.035em;
}

.client-portal-page :is(label, input, select, textarea, button, .button) {
  font-family: 'Archivo', sans-serif;
}

.client-portal-page :is(.panel-kicker, dt, .login-panel > label, .demo-access strong) {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .merch-page .merch-heading h1 {
    font-size: clamp(3.1rem, 14.5vw, 3.6rem);
    letter-spacing: -.04em;
  }

  .client-portal-page .auth-statement h1 {
    letter-spacing: -.035em;
  }
}