.skip-link {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  z-index: 20;
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-ink);
  color: var(--color-ground);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  transform: translateY(-400%);
}

.skip-link:focus {
  transform: none;
}

/* Small caps label, in the deep rose that passes AA on every light ground */
.eyebrow {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-accent-strong);
}

.eyebrow--ruled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

/* The two ticks take the colour of the label, on pearl as on midnight */
.eyebrow--ruled::before,
.eyebrow--ruled::after {
  content: "";
  flex: none;
  width: 2.5rem;
  border-top: 1px solid currentColor;
}

/* Tracking leaves a gap after the last letter; pull the right rule back in */
.eyebrow--ruled::after {
  margin-left: calc(-1 * var(--tracking-caps));
}

.section-head {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  text-align: center;
}

.section-title {
  max-width: 17em;
  font-size: var(--text-h2);
  letter-spacing: -0.005em;
}

.section-intro {
  max-width: var(--measure);
  font-size: var(--text-lead);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-ink-soft);
  text-wrap: balance;
}

/* Button: a filled plate with an engraved inner hairline, square corners */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-xl) var(--space-sm) calc(var(--space-xl) + var(--tracking-caps));
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

.btn--ink {
  background: var(--color-ink);
  color: var(--color-ground);
  box-shadow: inset 0 0 0 4px var(--color-ink), inset 0 0 0 5px var(--color-accent);
}

.btn--ink:hover {
  background: var(--color-accent-strong);
  box-shadow: inset 0 0 0 4px var(--color-accent-strong), inset 0 0 0 5px var(--color-ground);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-ink);
  box-shadow: inset 0 0 0 4px var(--color-accent), inset 0 0 0 5px var(--color-ink);
}

.btn--accent:hover {
  background: var(--color-ground);
  box-shadow: inset 0 0 0 4px var(--color-ground), inset 0 0 0 5px var(--color-ink);
}

.text-link {
  padding-block: var(--space-xs);
  border-bottom: var(--rule);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  line-height: 1.4;
  text-transform: uppercase;
}

.text-link:hover {
  border-bottom-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
}

/* Photo mounted like a tipped-in plate: white mat, midnight keyline */
.plate {
  padding: var(--space-xs);
  background: var(--color-surface);
  border: var(--rule);
}

.plate img {
  width: 100%;
}

@media (min-width: 48em) {
  .section-head {
    margin-bottom: var(--space-2xl);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .skip-link,
  .btn,
  .text-link {
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
}