/* ---------------------------------------------------------------------------
   BLAZE — layout & components. Values you are likely to tweak live in
   tokens.css; the swappable text treatments live in effects.css.
   --------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--sub-color);
  font-family: var(--font-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: var(--frame-inset);
}

img {
  display: block;
  max-width: 100%;
}

/* --- Stage: the framed photo ---------------------------------------------- */

.stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: calc(100svh - (var(--frame-inset) * 2));
  min-height: 22rem;
  border-radius: var(--frame-radius);
  /* Blurred placeholder so the frame is never an empty black box. */
  background-color: #6f7377;
  background-image: var(--lqip);
  background-size: cover;
  background-position: var(--photo-position);
  container-type: size;
  container-name: stage;
}

.stage__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-position);
  filter: brightness(var(--photo-brightness)) saturate(var(--photo-saturate));
  opacity: 0;
  transition: opacity 700ms ease;
  will-change: transform;
}

.stage__photo.is-loaded,
.no-js .stage__photo {
  opacity: 1;
}

/* Legibility layer between photo and text. */
.stage__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--scrim);
}

/* --- Lockup: wordmark + tagline + email ----------------------------------- */

.lockup {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 max(4vw, 1.25rem);
  font-size: var(--wordmark-size);
  line-height: 1;
}

.lockup__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: var(--lockup-align);
  text-align: center;
  translate: 0 var(--lockup-offset-y);
}

.lockup__wordmark {
  margin: 0;
  font-size: 1em;
  font-weight: var(--brand-weight);
  letter-spacing: var(--brand-tracking);
  text-wrap: balance;
}

/* The inner span is what carries colour/fill treatments, so the <h1> itself
   stays free for the entrance animation. */
.lockup__word {
  display: inline-block;
  color: var(--brand-color);
  mix-blend-mode: var(--brand-blend);
  text-shadow: var(--brand-shadow);
  -webkit-text-stroke: var(--brand-stroke) var(--brand-stroke-color);
}

.lockup__tagline,
.lockup__contact {
  margin: 0;
  font-size: var(--sub-size);
  font-weight: var(--sub-weight);
  letter-spacing: var(--sub-tracking);
  line-height: 1.2;
  color: var(--sub-color);
  text-shadow: var(--sub-shadow);
  text-wrap: balance;
}

.lockup__tagline {
  margin-top: var(--gap-wordmark-tagline);
}

.lockup__contact {
  margin-top: var(--gap-tagline-email);
}

.lockup__contact a {
  color: inherit;
  text-decoration: none;
  border-radius: 0.15em;
  transition: opacity 200ms ease;
}

.lockup__contact a:hover {
  opacity: 0.72;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.06em;
}

.lockup__contact a:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 0.18em;
}

/* Size the lockup against the frame rather than the viewport where supported,
   so it keeps its proportions no matter how the frame is inset. */
@supports (container-type: size) {
  .lockup {
    font-size: clamp(
      var(--wordmark-min),
      var(--wordmark-ideal),
      var(--wordmark-max)
    );
  }
}

/* Short, wide windows: size against height so the block never overflows. */
@container stage (height < 26rem) {
  .lockup {
    font-size: clamp(var(--wordmark-min-short), 14cqh, var(--wordmark-max));
  }
}

/* --- Utilities ------------------------------------------------------------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}