/* Abbe — a handheld spectrometer, over a plate of white light dispersed
   through curved glass.

   The plate decides almost everything below. Measured per pixel across the
   whole loop it runs from 0.035 to 1.000 relative luminance, which is the full
   range, so paper-coloured type is not available anywhere: 1.03:1 at best.
   Ink is available, but only in one place. Sliding a copy block over the frame,
   #0E1330 holds 10.24:1 against the top-left quadrant — x 0..600, y 100..400 of
   1272x720 — and then falls off a cliff: 3.54:1 one row-band lower and 1.53:1
   below that, where the glass rod brings its near-black core and its blown
   highlight into the same box. So the copy is top-left and it has a hard floor
   at 56% of frame height. That is not a composition preference; it is the only
   box on this plate that works.

   The topbar splits for the same reason. On the left the wordmark sits in the
   flare and measures 13.01:1 on the bare picture, so it is bare. On the right
   the nav crosses the rod: 1.73:1 bare, and 2.98:1 even on clear glass, because
   blurring an area that contains both black and white returns the mean and the
   mean is not enough. That pill is the one element here carrying a tint. */

:root {
  --glass:  #E1E5F7;   /* the pale ground the plate settles to */
  --haze:   #ADB6D6;
  --ink:    #0E1330;
  --paper:  #FBFAF6;

  --display: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --gutter: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--glass);
  color: var(--ink);
  font-family: var(--display);
  font-synthesis-weight: none;
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- stage ---------- */

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

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

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

/* ---------- topbar ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.14rem;
  font-variation-settings: 'wdth' 88;
  letter-spacing: -.005em;
}

.brand__mark { width: 25px; height: 25px; flex: none; }

/* The nav rides on tinted glass. Skypiea's pill could be perfectly clear — a
   blur over open sky averages to something a glyph can sit on — but that trick
   depends on the backdrop having a floor, and this one has none. Blurred, the
   worst reading under the nav is still only 2.98:1. Twenty-two per cent paper
   lifts it to 6.1:1, which is the least tint that clears AA with room to spare.
   No saturate, no second fill: the tint is doing legibility work and is kept to
   exactly the amount that work needs. */

.glass {
  background: rgba(251, 250, 246, .22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 8px 26px rgba(14, 19, 48, .07);
}

/* Without the blur the fill has to carry the contrast on its own. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(251, 250, 246, .84); }
}

.nav {
  display: flex;
  align-items: center;
  gap: .15rem;
  padding: .28rem;
  border-radius: 999px;
}

.nav a {
  padding: .5rem .9rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  font-variation-settings: 'wdth' 92;
}

.nav a:not(.nav__cta):hover { background: rgba(255, 255, 255, .5); }

/* Matched to `.nav a` on specificity, not below it: the rule above sets the
   link colour to ink, and a plain `.nav__cta` loses to it — ink on ink. */
.nav a.nav__cta {
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}

.nav a.nav__cta:hover { background: #1B2450; }

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 16px; height: 1.5px;
  margin: 3px auto;
  background: var(--ink);
}

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

/* Top-left and nowhere else, for the reason at the top of this file. */

.hero__copy {
  align-self: start;
  justify-self: start;
  max-width: 44rem;
  /* The gap the eyebrow used to hold open. Without it the headline sat almost
     against the topbar, and the band this copy has to stay inside starts at
     14% of the frame anyway — so the space is free. */
  padding-top: clamp(1rem, 5vh, 3.6rem);
}

.title {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4.3rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 84;
  line-height: 1;
  letter-spacing: -.028em;
}

/* The second line is the promise, so it is set open where the first is tight —
   the width axis carries the shift, not a change of family. */
.title em {
  font-style: normal;
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -.018em;
}

.lede {
  margin: 1.3rem 0 0;
  max-width: 29rem;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-top: 1.9rem;
  padding: .85rem 1.55rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.btn svg { width: 26px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.btn:hover { background: #1B2450; }

/* ---------- load sequence ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { animation: rise .7s cubic-bezier(.2, .7, .3, 1) both; }
  .title { animation-delay: .2s; }
  .lede  { animation-delay: .3s; }
  .btn   { animation-delay: .38s; }

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

/* ---------- short viewports ---------- */

/* The copy has a floor at 56% of the frame, so on a shallow window the block
   has to shrink rather than run down into the rod. */
@media (max-height: 780px) and (min-width: 621px) {
  .title { font-size: clamp(2.1rem, 4vw, 3.1rem); }
  .lede { margin-top: 1rem; font-size: 1rem; max-width: 26rem; }
  .btn { margin-top: 1.3rem; }
}

/* ---------- tablet and phone sideways ---------- */

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

  /* The pill becomes a panel, still glass, hanging under the burger. It is
     tinted far harder than the desktop pill because it is no longer over the
     plate — it hangs over the headline, and 22% left the title legible straight
     through the menu. Sixty per cent is where the type underneath stops
     competing with the links on top. */
  .nav {
    background: rgba(251, 250, 246, .6);
    position: absolute;
    top: calc(100% + .55rem);
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: .15rem;
    padding: .35rem;
    min-width: 12.5rem;
    border-radius: 20px;
    z-index: 2;
  }

  /* And with no blur under it, the panel has to be close to solid. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav { background: rgba(251, 250, 246, .96); }
  }

  .nav[hidden] { display: none; }
  .nav a { padding: .65rem .8rem; border-radius: 14px; font-size: .9rem; }
  .nav a.nav__cta { text-align: center; }

  .topbar { position: relative; }
}

/* ---------- phone, upright ---------- */

/* The portrait cut is the left column of the same plate, so the usable band is
   the same fraction of it: ink holds down to 56% of frame height and collapses
   below. The clip and the viewport are within a couple of per cent of the same
   aspect on any current phone, so that band always covers the space between the
   topbar and just past halfway — which is where the copy already sits. Nothing
   needs measuring at runtime here. */

@media (max-width: 620px) and (orientation: portrait) {
  .hero__copy { max-width: none; }

  .title { font-size: clamp(2.2rem, 10.5vw, 3.1rem); }
  .lede { margin-top: 1rem; font-size: .97rem; max-width: 21rem; }
  .btn { margin-top: 1.5rem; padding: .74rem 1.25rem; font-size: .72rem; }
  .btn svg { width: 22px; }
}

@media (max-width: 620px) and (orientation: portrait) and (max-height: 700px) {
  .title { font-size: 2.05rem; }
  .lede { margin-top: .8rem; font-size: .92rem; }
  .btn { margin-top: 1.2rem; }
}