/* utume.io — 1:1 rebuild of the original hosted landing page.
   Sizes step at the original's breakpoints rather than scaling fluidly: type and
   spacing at 768px, the text column at 481/769/1300/1800px. Values were measured
   on the live original either side of each breakpoint. */

@font-face {
  font-family: "Vina Sans";
  src: url("/fonts/vina-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("/fonts/poppins-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-700-italic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --sky: #b9d7f0;
  --forest: #3b542e;
  --slate: #40607a;
  --navy: #193c59;
  --lime: #f0ffc0;
  --lime-soft: #eafbc5;
  --frame: #444;

  --font-display: "Vina Sans", "Arial Narrow", sans-serif;
  --font-sans: "Poppins", system-ui, sans-serif;
  --font-serif: "Source Serif 4", Georgia, serif;

  --gutter: 26px;
  --header-h: 56px;

  /* below 768px (values from 768px up are in the media query) */
  --step-hero: 2.9375rem;    /* 47 */
  --step-tagline: 0.9375rem; /* 15 */
  --step-display: 2.125rem;  /* 34 */
  --step-lead: 1.1875rem;    /* 19 */
  --step-label: 1rem;        /* 16 */
  --step-body: 0.9375rem;    /* 15 */
  --step-button: 0.8125rem;  /* 13 */

  --space-band: 2.5rem;      /* 40 */
  --space-gap: 1.25rem;      /* 20 */
  --space-hero-top: 2rem;    /* 32 */
  --space-footer: 2rem;      /* 32 */
  --button-pad-y: 5px;
  --label-top: 1.5rem;       /* 24 */
  --label-left: 1rem;        /* 16 */
  --label-pad: 0.75rem;      /* 12 */

  --column: 86%;
}

@media (min-width: 768px) {
  :root {
    --step-hero: 5.5rem;       /* 88 */
    --step-tagline: 1.125rem;  /* 18 */
    --step-display: 3.5rem;    /* 56 */
    --step-lead: 1.625rem;     /* 26 */
    --step-label: 1.3125rem;   /* 21 */
    --step-body: 1rem;         /* 16 */
    --step-button: 0.875rem;   /* 14 */

    --space-band: 5rem;        /* 80 */
    --space-gap: 2.5rem;       /* 40 */
    --space-hero-top: 4rem;    /* 64 */
    --space-footer: 3.125rem;  /* 50 */
    --button-pad-y: 7px;
    --label-top: 3rem;         /* 48 */
    --label-left: 2rem;        /* 32 */
    --label-pad: 1.5rem;       /* 24 */
  }
}

/* The text column's share of the viewport. Its steps sit 1px off the type
   step on purpose: the original is still 75% wide at exactly 768px. */
@media (width > 480px) {
  :root { --column: 75%; }
}
@media (width > 768px) {
  :root { --column: 60%; }
}
@media (width >= 1300px) {
  :root { --column: 50%; }
}
@media (width >= 1800px) {
  :root { --column: 40%; }
}

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

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

body {
  margin: 0;
  background: var(--sky);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.6;
}

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

h1,
h2,
p {
  margin: 0;
}

:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

/* ---- header ---------------------------------------------------------------- */

.site-header {
  height: var(--header-h);
  padding: 10px 14px;
}

/* ---- hero ------------------------------------------------------------------ */

/* One viewport tall and full-bleed, as the original renders live (its hero is
   window.innerHeight; svh matches that on mobile, where vh is the toolbar-less
   height). */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: clip; /* not hidden: that makes a scroll container, which the zoom's view() timeline would bind to */
  background: #04182a;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48.95% 0;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(215px, 134px + 21.6vw, 300px);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0));
  pointer-events: none;
  z-index: 1;
}

.hero__text {
  position: absolute;
  inset: 0 0 auto auto;
  z-index: 2;
  /* The original: an 80vw column 5vw from the right edge, whose text is capped
     at 765px and pushed a third of the leftover width in from the column's
     right edge (19px / 39px / 201px at 375 / 768 / 1440). */
  width: min(765px, 80vw);
  padding-top: var(--space-hero-top);
  margin-right: calc(5vw + max(0px, (80vw - 765px) / 3));
  text-align: right;
}

.hero__title {
  color: var(--sky);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-hero);
  line-height: 1.3;
}

.hero__tagline {
  margin-top: 1rem;
  color: var(--lime);
  font-weight: 800;
  font-size: var(--step-tagline);
  line-height: 1.5;
}

/* ---- text bands ------------------------------------------------------------ */

.band {
  padding-block: var(--space-band);
}

.column {
  width: var(--column);
  margin-inline: auto;
  text-align: center;
}

.column > * + * {
  margin-top: var(--space-gap);
}

.display {
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-display);
  line-height: 1.3;
  text-transform: uppercase;
}

.divider {
  width: 120px;
  height: 3px;
  margin-inline: auto;
  border: 0;
  background: var(--lime-soft);
}

.column > .display + .divider {
  margin-top: 11px;
}

.lead {
  color: var(--slate);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  font-size: var(--step-lead);
  line-height: 1.4;
}

.note {
  font-weight: 600;
  line-height: 1.6;
}

.button {
  display: inline-block;
  padding: var(--button-pad-y) 1.15em;
  border-radius: 0.2em;
  background: var(--lime);
  color: var(--slate);
  font-size: var(--step-button);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.button:hover {
  background: #fff;
}

/* ---- video ----------------------------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9; /* border included, as the original's frame */
  border: 2px solid var(--frame);
  background: #e2b71b;
}

.video__play {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.video__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  translate: -50% -50%;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.video__play:hover .video__icon,
.video__play:focus-visible .video__icon {
  opacity: 1;
}

.video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__fallback {
  position: absolute;
  inset: auto 0 0;
  padding: 0.5rem;
  background: rgb(0 0 0 / 0.7);
  color: #fff;
}

/* ---- photo bands ----------------------------------------------------------- */

/* Half a viewport tall, like the original's "window" sections. */
.photo {
  position: relative;
  height: 50vh;
  height: 50svh;
  overflow: hidden;
}

.photo__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Crop fitted to the original by pixel-matching at 375px and 1440px. */
.photo__image--low {
  object-position: 59% 94%;
}

.photo__label {
  position: absolute;
  top: var(--label-top);
  left: var(--label-left);
  max-width: 50%;
  padding: var(--label-pad);
  background: rgb(240 255 192 / 0.8);
  color: var(--forest);
  font-size: var(--step-label);
  font-weight: 600;
  line-height: 1.5;
}

/* ---- footer ---------------------------------------------------------------- */

.site-footer {
  padding-top: var(--space-gap);
  padding-bottom: 10px;
  font-size: 0.8125rem;
}

.credits {
  font-weight: 300;
  line-height: 2;
}

.credits strong {
  font-weight: 600;
}

.site-footer__links {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-top: var(--space-footer);
  padding-inline: var(--gutter);
}

.site-footer__links a {
  color: var(--navy);
}

/* ---- scroll reveal (progressive: only with JS and motion allowed) --------- */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    transition:
      opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
      transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .js .reveal:not(.is-visible) {
    opacity: 0;
    transform: translate3d(0, 40px, 0);
  }
}

/* ---- scroll effects (measured on the original at 1440×900 and 375×812) ----

   Photo windows: each .photo band is a window onto a viewport-sized image pinned
   to the viewport, so the page slides over a still picture. The image is fixed
   and clip-path (not overflow, which fixed descendants escape) trims it to the
   band — this also works on iOS, which ignores background-attachment: fixed.

   Hero: the image zooms from 1 to 1.1, from its centre, while the hero scrolls
   out of view. Scroll-driven, so no JS; browsers without animation-timeline keep
   a still hero. Both effects are off under prefers-reduced-motion. */

@media (prefers-reduced-motion: no-preference) {
  .photo {
    clip-path: inset(0);
  }

  .photo picture {
    position: fixed;
    inset: 0;
  }

  .photo__image {
    height: 100vh;
  }

  @supports (animation-timeline: view()) {
    .hero__image {
      animation: hero-zoom linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

@keyframes hero-zoom {
  to {
    scale: 1.1;
  }
}

/* ---- secondary pages ------------------------------------------------------- */

.page {
  padding-block: var(--space-band);
}

.page .column {
  text-align: left;
}

.page h1 {
  color: var(--forest);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-display);
  line-height: 1.3;
  text-transform: uppercase;
}

.page a {
  color: var(--navy);
}