/* Skypiea — dawn balloon ascents above the Kanchan cloud deck.

   Everything here is type on an open sky, with nothing laid over the clip to
   dim it. That constraint set the palette. Measured across the whole loop, the
   plate never drops below 0.206 relative luminance and blows out to 1.000 in
   the glare, so paper-coloured type tops out at 2.76:1 anywhere in frame and
   is simply not available. Ink is: #072742 holds 5.66:1 over the copy block
   and 4.92:1 under the wordmark.

   The one place ink alone is not enough is the nav, out in the deep blue at
   4.07:1. That sits on a glass pill instead, where the blur averages the sky
   under the letters and takes it to about 5.7:1. */

:root {
  --sky-pale: #8FC3FC;
  --azure:    #3E95F4;
  --ink:      #072742;
  --sun:      #E8A93C;
  --paper:    #FBFAF6;

  --rule:  rgba(7, 39, 66, .34);
  --rule-soft: rgba(7, 39, 66, .18);

  --display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

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

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--sky-pale);
  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(--sky-pale);
}

.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.12rem;
  font-variation-settings: 'wdth' 108;
  letter-spacing: -.01em;
}

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

/* The nav rides on a glass pill rather than sitting bare on the sky. It is the
   one place a layer over the picture earns itself: out in the deep blue the
   nav measured 4.07:1, short of AA for type this small, and a pill this size
   dims a corner rather than the frame. Thirty per cent paper over the darkest
   reading the plate ever gives there works out at 8.9:1, and the blur behind
   it only helps by averaging the sky the letters sit on. */

/* No tint and no saturate. A saturate() boost was what made an earlier version
   of this read as a solid blue band rather than glass: it pushed the sky
   inside the pill well past the sky around it, so the shape announced itself
   as a colour. What is left is a hairline and a blur, and the blur is doing
   the legibility work on its own — averaging the backdrop lifts the darkest
   pixel a glyph can land on from .230 to roughly the local mean of .30, which
   is 5.7:1 against ink. */

.glass {
  background: transparent;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),   /* the lit top rim, barely */
    0 6px 22px rgba(7, 39, 66, .08);
}

/* 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, .82); }
}

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

.nav a {
  padding: .5rem .95rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: .01em;
}

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

/* 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: #0C3A61; }

.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 ---------- */

.hero__copy {
  align-self: center;
  justify-self: start;
  max-width: 46rem;
}

.eyebrow {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}

.title {
  margin: 0;
  font-size: clamp(2.5rem, 5.2vw, 4.6rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 112;
  line-height: .98;
  letter-spacing: -.025em;
}

.title em {
  font-style: normal;
  font-weight: 500;
  font-variation-settings: 'wdth' 106;
}

.lede {
  margin: 1.35rem 0 0;
  max-width: 30rem;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  font-weight: 400;
  line-height: 1.55;
}

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

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

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

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

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

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

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

  /* The pill becomes a panel, still glass, hanging under the burger. */
  .nav {
    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;
  }

  .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 a column centred on the sun, so the lower half of the
   frame is burst and deck — measured, ink holds 9.32:1 in the band just above
   the sun against 3.79:1 up at the top. script.js parks the copy in that band
   by putting it a fixed gap above the cloud line, wherever cover happens to
   put that line. */

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

  .title { font-size: clamp(2.4rem, 11.5vw, 3.4rem); }
  .lede { margin-top: 1rem; font-size: .98rem; max-width: 22rem; }
  .btn { margin-top: 1.6rem; padding: .72rem 1.3rem; font-size: .76rem; }
  .btn svg { width: 22px; }
}

@media (max-width: 620px) and (orientation: portrait) and (max-height: 700px) {
  .hero__copy { padding-top: 7svh; }
}