@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/InstrumentSans-400.woff2") format("woff2");
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/InstrumentSans-500.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --fg: #1a1a1a;
  --muted: #9a9a95;
  --body: #3a3a38;
  --rule: #b4b4af;
  --rule-hl: #c4c4bf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121210;
    --fg: #e9e7e0;
    --muted: #77756e;
    --body: #b8b6ae;
    --rule: #4a4944;
    --rule-hl: #3e3d38;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  overflow-y: visible;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: visible;
  background: var(--bg);
  color: var(--fg);
  font-family: "Instrument Sans", system-ui, -apple-system, "Helvetica Neue",
    sans-serif;
  font-weight: 400;
}

main {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  overflow: visible;
  padding: calc(44px + env(safe-area-inset-top, 0px))
    calc(48px + env(safe-area-inset-right, 0px))
    calc(44px + env(safe-area-inset-bottom, 0px))
    calc(48px + env(safe-area-inset-left, 0px));
}

h1 {
  margin: 0;
  max-width: 960px;
  overflow: visible;
  font-size: clamp(30px, 6.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.headline-dark .w {
  display: inline-block;
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Avoid transform on preview triggers — it breaks position:fixed descendants. */
.headline-dark a.w.hot {
  animation-name: fadein;
}

.headline-muted {
  color: var(--muted);
  animation: fadein 0.9s ease both;
  animation-delay: 0.95s;
}

.bottom {
  max-width: 760px;
  margin-top: auto;
  padding-top: 100px;
  animation: rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: 1.25s;
  transition:
    opacity 0.35s ease,
    transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.label {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.currently {
  margin: 0;
  font-size: 21px;
  line-height: 1.45;
  color: var(--body);
}

nav[aria-label="Contact"] {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 500;
  animation: fadein 0.6s ease both;
  animation-delay: 1.9s;
}

a {
  color: var(--fg);
  text-decoration: underline dotted;
  text-underline-offset: 4px;
  text-decoration-color: var(--rule);
  transition: text-decoration-color 0.2s;
}

h1 a {
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
  text-decoration-color: var(--rule-hl);
}

a.mockuuups {
  overflow-wrap: anywhere;
}

.hot {
  position: relative;
  display: inline-block;
}

/* Full-bleed collage — fixed to the viewport, not to the word. */
.float-previews {
  position: fixed;
  z-index: 20;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition:
    opacity 0.25s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.55s;
}

.float-previews img {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  max-width: var(--w, 34%);
  border-radius: 18px;
  top: var(--t, 10%);
  left: var(--l, auto);
  right: var(--r, auto);
  opacity: 0;
  transform: translate3d(var(--dx, 0px), var(--dy, 28px), 0)
    rotate(var(--tilt, 0deg)) scale(0.92);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--step, 0s);
}

/* --- Mockuuups: large spread, lower half (clear of the heading) --- */
#preview-mockuuups {
  top: 34vh;
  left: 2vw;
  width: 96vw;
  height: 62vh;
}

#preview-mockuuups img {
  max-height: min(48vh, 420px);
}

#preview-mockuuups img:nth-child(1) {
  --w: 38%;
  --t: 22%;
  --l: 8%;
  --r: auto;
  --tilt: -6deg;
  --dx: -22px;
  --dy: 36px;
  --step: 0s;
  z-index: 2;
}

#preview-mockuuups img:nth-child(2) {
  --w: 40%;
  --t: 28%;
  --l: 30%;
  --r: auto;
  --tilt: 3deg;
  --dx: 0px;
  --dy: 44px;
  --step: 0.14s;
  z-index: 3;
}

#preview-mockuuups img:nth-child(3) {
  --w: 36%;
  --t: 14%;
  --r: 10%;
  --l: auto;
  --tilt: 8deg;
  --dx: 24px;
  --dy: 40px;
  --step: 0.28s;
  z-index: 1;
}

/* --- Yoto / Strava: smaller, above the CURRENTLY copy --- */
#preview-yoto,
#preview-strava {
  top: auto;
  bottom: max(28vh, calc(env(safe-area-inset-bottom, 0px) + 200px));
  left: max(20px, env(safe-area-inset-left, 0px));
  width: min(760px, calc(100vw - 40px));
  height: min(220px, 32vh);
}

#preview-yoto img {
  max-height: min(200px, 30vh);
  border-radius: 14px;
}

#preview-strava {
  height: min(340px, 48vh);
}

#preview-strava img {
  max-height: min(320px, 46vh);
  border-radius: 14px;
}

#preview-yoto img:nth-child(1) {
  --w: 58%;
  --t: 8%;
  --l: 4%;
  --tilt: -5deg;
  --dx: -14px;
  --dy: 24px;
  --step: 0s;
  z-index: 1;
}

#preview-yoto img:nth-child(2) {
  --w: 58%;
  --t: 28%;
  --l: 38%;
  --r: auto;
  --tilt: 6deg;
  --dx: 14px;
  --dy: 28px;
  --step: 0.16s;
  z-index: 2;
}

#preview-strava img:nth-child(1) {
  --w: 52%;
  --t: 4%;
  --l: 12%;
  --tilt: -6deg;
  --dx: -14px;
  --dy: 24px;
  --step: 0s;
  z-index: 1;
}

#preview-strava img:nth-child(2) {
  --w: 54%;
  --t: 18%;
  --l: 36%;
  --r: auto;
  --tilt: 7deg;
  --dx: 14px;
  --dy: 28px;
  --step: 0.16s;
  z-index: 2;
}

@media (hover: hover) {
  a:hover,
  a:focus-visible {
    text-decoration-style: solid;
    text-decoration-color: var(--fg);
  }

  body:has([data-preview="mockuuups"]:hover) #preview-mockuuups,
  body:has([data-preview="mockuuups"]:focus-visible) #preview-mockuuups,
  body:has([data-preview="yoto"]:hover) #preview-yoto,
  body:has([data-preview="yoto"]:focus-visible) #preview-yoto,
  body:has([data-preview="strava"]:hover) #preview-strava,
  body:has([data-preview="strava"]:focus-visible) #preview-strava {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0) scale(1);
    transition-delay: 0s;
  }

  body:has([data-preview="mockuuups"]:hover) #preview-mockuuups img,
  body:has([data-preview="mockuuups"]:focus-visible) #preview-mockuuups img,
  body:has([data-preview="yoto"]:hover) #preview-yoto img,
  body:has([data-preview="yoto"]:focus-visible) #preview-yoto img,
  body:has([data-preview="strava"]:hover) #preview-strava img,
  body:has([data-preview="strava"]:focus-visible) #preview-strava img {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tilt, 0deg)) scale(1);
  }

  /* Mockuuups needs the lower page clear */
  body:has([data-preview="mockuuups"]:hover) .bottom,
  body:has([data-preview="mockuuups"]:focus-visible) .bottom {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}

a:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 639px) {
  main {
    padding: calc(24px + env(safe-area-inset-top, 0px))
      calc(20px + env(safe-area-inset-right, 0px))
      calc(24px + env(safe-area-inset-bottom, 0px))
      calc(20px + env(safe-area-inset-left, 0px));
  }

  .bottom {
    padding-top: 56px;
  }

  .currently {
    font-size: 18px;
    line-height: 1.5;
  }

  h1 a {
    text-underline-offset: 5px;
  }

  nav[aria-label="Contact"] a {
    padding: 8px 0;
  }

  #preview-mockuuups {
    top: 30vh;
    height: 58vh;
  }

  #preview-yoto,
  #preview-strava {
    bottom: max(24vh, calc(env(safe-area-inset-bottom, 0px) + 160px));
  }

  #preview-yoto {
    height: min(180px, 28vh);
  }

  #preview-strava {
    height: min(280px, 42vh);
  }

  #preview-strava img {
    max-height: min(260px, 40vh);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  .bottom,
  .float-previews,
  .float-previews img {
    transition: opacity 0.15s ease !important;
    transform: none !important;
  }
}