/* ============================================================
   FIRST RUN, PORTFOLIO BUILD ONLY

   Not part of the submitted prototype. A marker arrives with a
   rubric telling them what to look at; a visitor arrives with
   nothing and lands on a stranger's gin collection.

   Every value here is a token. This file introduces no colour,
   no spacing and no radius of its own, because a build that
   diverges from the design system to explain the design system
   would be arguing against itself.
   ============================================================ */

.intro {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--text-primary) 55%, transparent);
  animation: fade-in var(--motion-base) var(--ease);
  overscroll-behavior: contain;
}
.intro:focus { outline: none; }

.intro-panel {
  width: min(30rem, 100%);
  max-height: 86vh; overflow-y: auto;
  padding: var(--space-24);
  border-radius: var(--radius-2xl);
  background: var(--surface-card);
  box-shadow: var(--elevation-overlay);
}

.intro-eyebrow {
  margin: 0 0 var(--space-8);
  color: var(--text-muted);
  font: var(--font-weight-524) var(--text-size-12)/var(--text-line-16) var(--font-family);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.intro-eyebrow + h2 { margin-top: 0; }

.intro h2 {
  margin: 0 0 var(--space-12);
  color: var(--text-primary);
  font: var(--font-weight-655) var(--display-h4-size)/var(--display-h4-line) var(--font-family);
  font-variation-settings: var(--axis-sharp);   /* the one place the brand voice shows */
  letter-spacing: var(--tracking-tight);
}

.intro p {
  margin: 0 0 var(--space-16);
  color: var(--text-secondary);
  font: var(--font-weight-460) var(--text-size-14)/var(--text-line-20) var(--font-family);
}

.intro ul {
  margin: 0 0 var(--space-20);
  padding-left: var(--space-20);
  color: var(--text-secondary);
  font: var(--font-weight-460) var(--text-size-14)/var(--text-line-20) var(--font-family);
}
.intro li { margin-bottom: var(--space-10); }
.intro li::marker { color: var(--action-primary); }
.intro li b { color: var(--text-primary); font-weight: var(--font-weight-640); }

.intro-actions { margin-bottom: var(--space-16); }

.intro-foot {
  margin: 0;
  color: var(--text-muted);
  font: var(--font-weight-420) var(--text-size-12)/var(--text-line-16) var(--font-family);
}
.intro-foot a { color: var(--action-primary); }

/* On a short viewport this competes with the thing it is introducing. */
@media (max-height: 34rem) {
  .intro-panel { padding: var(--space-16); }
  .intro ul { margin-bottom: var(--space-12); }
  .intro li { margin-bottom: var(--space-6); }
}