/* Altura — a hero cut from one plate of a valley at first light.

   Colours are sampled off the plate itself (frame 84 of mountain-hero.mp4),
   so the interface never sits at a temperature the footage does not contain:
   the rock face reads #041C34, the far ridge #2F3E5B, the sky #2674BA, the
   sun #FFD053 with #C47B10 in the glow beside it. */

:root {
  --ink:    #04141F;   /* deepest rock, for type on light */
  --ridge:  #2F3E5B;
  --sky:    #2674BA;
  --sun:    #FFD053;
  --ember:  #C47B10;
  --mist:   #E8EDF3;
  --paper:  #F6F2EC;

  --gutter: clamp(1.25rem, 4.5vw, 4.5rem);

  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --ember-deep: #8A4A08;   /* the sun's glow taken down far enough to read on it */

  /* Two halos, because the plate has two halves. Where the copy sits on the
     dark forest corner the type is paper and the halo is ink; where it sits on
     the lit valley the type is ink and the halo is paper. Either way the
     contrast is carried at the edge of each glyph, so the frame between the
     letters stays at full strength. */
  --halo:
    0 0 2px rgba(4, 20, 31, .95),
    0 0 5px rgba(4, 20, 31, .85),
    0 1px 3px rgba(4, 20, 31, .95),
    0 2px 22px rgba(4, 20, 31, .7);

  --halo-light:
    0 0 1px rgba(246, 242, 236, 1),
    0 0 2px rgba(246, 242, 236, 1),
    0 0 4px rgba(246, 242, 236, .95),
    0 1px 2px rgba(246, 242, 236, .95),
    0 0 14px rgba(246, 242, 236, .5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- the plate ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(1.1rem, 2.4vh, 2rem) var(--gutter) clamp(1.4rem, 3vh, 2.4rem);
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ridge);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nothing is laid over the plate. A scrim would have made the type easier to
   measure, but it also washes the picture — and the picture is the point here,
   so every word carries its own shadow instead.

   --halo is that shadow, and it is built to be an edge rather than a glow: two
   tight rings at 2px and 5px give each glyph a dark outline against bright
   sky, and one wide soft pass at 22px lifts it off busy cloud. A shadow is
   drawn per glyph, so it darkens the pixels under the letters and leaves the
   rest of the frame at full strength, which no full-bleed gradient can do. */

/* ---------- top bar ---------- */

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2vw, 1.7rem);
  letter-spacing: .01em;
  text-shadow: var(--halo);
}

.brand__mark {
  width: 1.35em;
  height: 1.35em;
  fill: none;
  stroke: var(--sun);
  stroke-width: 1.6;
  stroke-linejoin: round;
}

.brand__mark circle { fill: var(--sun); stroke: none; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.2rem);
  font-size: .9rem;
  font-weight: 500;
}

.nav a {
  color: var(--paper);
  text-decoration: none;
  opacity: .88;
  text-shadow: var(--halo);
  transition: opacity .18s ease;
}

.nav a:hover { opacity: 1; }

.nav__cta {
  padding: .5rem 1rem;
  border: 1px solid rgba(246, 242, 236, .42);
  border-radius: 999px;
  background: rgba(4, 20, 31, .28);
  opacity: 1;
  transition: background .18s ease, border-color .18s ease;
}

.nav__cta:hover {
  background: rgba(246, 242, 236, .14);
  border-color: rgba(246, 242, 236, .75);
}

.burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.burger span {
  position: absolute;
  left: 9px;
  width: 24px;
  height: 1.5px;
  background: var(--paper);
  transition: transform .22s ease, opacity .22s ease;
}

.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 24px; }

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- copy ---------- */

.hero__copy {
  position: relative;
  z-index: 2;
  align-self: end;
  max-width: 30rem;
}

.eyebrow {
  margin: 0 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  /* Not gold: the sky this sits on is gold too, and at 11px a warm-on-warm
     line is the first thing to disappear. The accent stays on the headline,
     which is big enough to hold it. */
  color: var(--paper);
  text-shadow: var(--halo);
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.6vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.005em;
  text-shadow: var(--halo);
}

.title em {
  font-style: italic;
  color: var(--sun);
}

.lede {
  margin: 1.1rem 0 0;
  max-width: 34ch;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.6;
  color: var(--paper);
  text-shadow: var(--halo);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  margin-top: clamp(1.5rem, 3.4vh, 2.2rem);
  min-height: 44px;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--paper);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  /* Solid, not outlined. The plate peaks at 192/255 somewhere under every
     copy-sized region of this frame, so a translucent control would keep
     changing tone as the cloud moved through it. Filled, it reads at 13.8:1
     no matter what is behind. */
  background: var(--ink);
  transition: background .2s ease, border-color .2s ease;
}

.btn svg {
  width: 28px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  transition: transform .2s ease;
}

.btn:hover {
  background: #0A2436;
  border-color: var(--sun);
}

.btn:hover svg { transform: translateX(4px); }

/* ---------- scroll cue ---------- */

.scroll {
  position: relative;
  z-index: 2;
  justify-self: center;
  margin: 0;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(246, 242, 236, .82);
  text-shadow: var(--halo);
}

.scroll::after {
  content: "";
  display: block;
  width: 1px;
  height: 26px;
  margin: .6rem auto 0;
  background: linear-gradient(to bottom, rgba(246, 242, 236, .6), transparent);
}

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .burger { display: block; }

  .nav {
    position: absolute;
    top: calc(100% + .75rem);
    right: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.1rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(246, 242, 236, .18);
    border-radius: 14px;
    background: rgba(4, 20, 31, .82);
    backdrop-filter: blur(14px);
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }

  .nav[data-open] {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ---------- upright phones ----------
   The portrait plate is a native 500x1080 crop of the same frame, so the
   towers already sit at the edges and nothing needs shifting. The block moves
   to the middle of the screen and centres on the axis the cut is built around:
   a tower on each edge, the sun between them. Ranged-left type fights that
   axis; centred type sits on it.

   The lede goes. Every line of it would have crossed the sun — the one part of
   this frame that is genuinely near-white — and a sentence set in body size
   cannot hold its own there on a shadow alone. The headline can: it is four
   times the size, and its shadow is thick enough to separate it from anything
   behind it. So on a phone the picture keeps the middle of the frame and the
   copy keeps its two lines and the button. */

@media (max-width: 620px) and (orientation: portrait) {
  /* Below the sun, not across it. The disc sits at 38-43% of the screen on
     every common phone — the portrait cut is close enough to phone aspect that
     cover scaling lands it in the same place — so the block is anchored to the
     lower half, clear of it, with the valley and the river still running out
     underneath. */
  .hero__copy {
    align-self: start;
    max-width: none;
    /* the fallback holds until script.js measures the plate */
    padding-top: 48svh;
    text-align: center;
  }

  .title { font-size: clamp(2.5rem, 11.5vw, 3.6rem); }

  /* Measured off the portrait cut: under this block the plate runs 0.58-0.99
     in relative luminance — lit sky and valley haze almost all of it. Paper
     type scores 1.00:1 against that; ink scores 11.2:1 on the eyebrow line and
     18.5:1 at its brightest. So the phone reverses the theme, and the paper
     halo is what keeps the ink off the dark ridges cut into the same band. */
  .eyebrow,
  .title {
    color: var(--ink);
    text-shadow: var(--halo-light);
  }

  /* Ember was too close to the haze it sits on — the accent goes, and the
     italic carries the second line on its own. */
  .title em { color: var(--ink); }

  /* The bar is the one part of the phone cut that does not turn over. It sits
     on the tops of the towers, which average 0.21 — dark ground, where ink
     would have nothing but its halo to read by. Paper and the ink halo stay. */

  /* An outlined button needs its background to do half the work, and here the
     background is a sunrise. So on a phone it is solid: paper on ink, 13.8:1,
     independent of whatever moves behind it. A filled control is not a layer
     over the plate — it is the size of the words inside it. */
  .btn {
    /* Paper on the solid ink fill — the reversal above is for type sitting
       directly on the plate, and the button is not: it brings its own ground. */
    color: var(--paper);
    text-shadow: none;

    /* Smaller than the desktop control — it is solid now, so it does not need
       the size to be seen. The 44px min-height stays: that is the tap target,
       and the padding below only sets how much room the label gets inside it. */
    font-size: .7rem;
    letter-spacing: .1em;
    gap: .55rem;
    padding: .6rem 1.15rem;
  }

  .btn svg { width: 20px; }

  .btn:hover {
    background: #0A2436;
    border-color: transparent;
  }

  .lede { display: none; }

  .btn { margin-top: 1.5rem; }

  /* The cue would land on the river, the brightest water in the frame, at a
     size too small for a shadow to rescue. A phone does not need telling. */
  .scroll { display: none; }
}

/* ---------- phone held sideways ----------
   Width but no height: pull the type down and drop the scroll cue rather than
   let the block push the plate off the screen. */

@media (max-height: 520px) and (min-width: 621px) {
  .hero { min-height: 100svh; }
  .title { font-size: clamp(2rem, 5vw, 2.8rem); }
  .lede { display: none; }
  .scroll { display: none; }
  .btn { margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg, .nav a, .nav__cta, .burger span { transition: none; }
}