/**
 * Atelier — generic section scaffolding. Extracted from _home.css.
 */
.atl-section { padding: 72px 48px; }
.atl-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 36px; }
.atl-section-title { font-family: 'Cormorant Garamond', serif; font-size: 40px; font-weight: 400; margin: 0; }
.atl-section-cta {
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--atl-text); text-decoration: none;
  border-bottom: 1px solid var(--atl-accent); padding-bottom: 3px;
}
.atl-section-cta:focus-visible { outline: 2px solid var(--atl-focus-ring); outline-offset: 2px; }

@media (max-width: 767px) {
  .atl-section { padding: 40px 20px; }
  .atl-section-title { font-size: 28px; }
}

/**
 * Shared placeholder-media pattern (same diagonal-hatch look used across
 * hero/editorial media in _home.css) as a reusable utility, so image-shaped
 * placeholders elsewhere (About team portraits, Contact/404 art, etc.) don't
 * each reinvent their own color-mix() ratio.
 */
.atl-media-placeholder {
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--atl-accent) 10%, var(--atl-bg)),
    color-mix(in oklab, var(--atl-accent) 10%, var(--atl-bg)) 12px,
    color-mix(in oklab, var(--atl-accent) 4%, var(--atl-bg)) 12px,
    color-mix(in oklab, var(--atl-accent) 4%, var(--atl-bg)) 24px);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.atl-media-placeholder-label { font-family: monospace; font-size: 11px; color: var(--atl-text-subtle); text-align: center; padding: 0 10px; }