/* Smink one-page: background image with real, clickable text on top */

:root {
  --text: #fff;
  --shadow: 0 1px 3px rgb(0 0 0 / 35%);
  --gutter: clamp(1.25rem, 3.6vw, 4.5rem);
  --font: "Century Gothic", "CenturyGothic", "AppleGothic", "Futura", "Avenir Next", sans-serif;
}

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

html,
body { height: 100%; margin: 0; }

body {
  font-family: var(--font);
  color: var(--text);
  background: #8a8073 url("img/bg.jpg") 70% center / cover no-repeat;
  background-image: image-set(url("img/bg.webp") type("image/webp"), url("img/bg.jpg") type("image/jpeg"));
}

.intro {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--gutter);
  text-shadow: var(--shadow);
}

.intro__head {
  display: flex;
  align-items: flex-start;
  gap: 0 1.5vw;
}

/* Tall, airy letters as in the design; padding reserves the stretched height */
.intro__title {
  margin: 0;
  padding-bottom: .3em;
  font-weight: 400;
  font-size: clamp(3.5rem, 9.5vw, 11rem);
  line-height: .85;
  letter-spacing: .3em;
  text-transform: uppercase;
  transform: scaleY(1.35);
  transform-origin: top left;
  white-space: nowrap;
}

.intro__tagline {
  margin: 0;
  padding-top: .2em;
  font-size: clamp(1rem, 2.2vw, 2.25rem);
  line-height: 1.2;
}

.intro__contact {
  display: flex;
  flex-direction: column;
  gap: .15em;
  font-style: normal;
  font-size: clamp(1rem, 1.6vw, 1.6rem);
}

.intro__link {
  color: inherit;
  text-decoration: none;
}

.intro__link:hover,
.intro__link:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

.intro__label {
  display: inline-block;
  min-width: 4.5em;
}

/* Phone: portrait crop keeps the model in view, text gets more room */
@media (max-width: 640px) {
  body { background-position: 66% center; }

  .intro__head { flex-direction: column; gap: .4em; }
  .intro__title { font-size: 4.2rem; letter-spacing: .22em; }
  .intro__label { min-width: 2.5em; }
}