/* societee's own rules, laid over the website layer (shared/shared.css): the accent, the
   greeting, the hero photograph and the cards that carry a photograph. Every other rule is the
   layer's. */
:root { --accent: #0071e3; --accent-dark: #0066cc; }

/* The greeting above the eyebrow: one element, one class, in the layer's own type. */
.hero-hey {
  margin: 0 0 var(--sp-sm);
  color: var(--accent);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
}

/* The hero photograph: 16 by 9, the layer's media corners. */
.hero-media {
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: var(--sp-xl) auto 0;
  border-radius: var(--radius-media);
  object-fit: cover;
}

/* A card that opens with a photograph: the picture runs to the card's edges and takes its top
   corners, the words keep the card's own padding. */
.card-photo { padding: 0; overflow: hidden; justify-content: flex-start; }
.card-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card-photo h3 { margin: var(--sp-md) var(--sp-lg) 0.35em; }
.card-photo p { margin: 0 var(--sp-lg); }
.card-photo p:last-child { margin-bottom: var(--sp-lg); }

/* The photo credits page: under the photograph's name, where the picture is used, then who made
   it, its licence and what was done to it. */
.card-photo .credit-line { margin-top: 0.6em; font-size: 0.9rem; }