/* ============================================================
   Natty — hero section

   The plate is a wildflower meadow at sunset. Measured across
   the loop, in the plate's own coordinates (/255 luma):

     sky, top-left   y 0.00-0.42   mean 236  darkest 196
     hills, horizon  y 0.58-0.72   mean 218
     flower bed      y 0.62-1.00   mean 178  darkest 41

   So the copy lives in the top-left sky, where even the
   darkest cloud leaves ink at better than 7:1, and nothing on
   the page dims the footage. The one element that does sit
   over the flower bed — the button — brings its own paper.

   Portrait screens get a portrait cut of the same meadow. Its
   copy zone (x 0.14-0.82, y 0.28-0.43 of the plate) keeps ink
   at 6.9:1 or better on its darkest frame, so the same rule
   holds there too.

   The clip plays forward only: the steady middle of the plate,
   with its last second dissolved into its first, so the loop
   never reverses or slows. The generator eases the camera in
   and out, and a boomerang turned round on exactly that stall.

   Typography is a herbarium sheet: an old-style serif for the
   headline and the running text, and a typed monospace for
   everything that labels or acts — the eyebrow, the nav, the
   button.
   ============================================================ */

:root {
  --ink:    #2B2130;   /* the meadow's own deepest shadow, warmed */
  --ink-2:  #443746;   /* a step back, for running text */
  --paper:  #F7EFE8;   /* the pale sky wash — button text, the open menu */
  --stem:   #4F5C36;   /* the hillside green, for the eyebrow and the mark */
  --laven:  #7A66A6;   /* the lavender spike: the one accent */
  --hair:   rgba(43, 33, 48, .16);

  --serif:  "EB Garamond", Georgia, "Times New Roman", serif;
  --mono:   "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

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

html, body { margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--laven); outline-offset: 4px; }

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

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0 var(--gutter) clamp(2rem, 6vh, 4rem);
}

.hero__media { position: absolute; inset: 0; overflow: hidden; }

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The composition is level and centred; on anything wider than 16:9 cover
     trims top and bottom, so the bias holds the horizon and the flower bed
     rather than the empty upper sky. */
  object-position: center 58%;
  display: block;
}

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

.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: clamp(1.3rem, 3.2vh, 2.1rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.35rem, 1.8vw, 1.6rem);
  letter-spacing: .01em;
}

.brand__seed { width: 24px; height: 24px; flex: none; color: var(--stem); }

.brand__word { white-space: nowrap; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2rem);
}

.nav__link,
.nav__cta {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav__link {
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible {
  color: var(--stem);
  border-color: currentColor;
}

/* the one nav item that can drift over the flower bed on a short viewport, so
   it brings its own paper the way the button does rather than sitting on a
   scrim laid over the footage */
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .45rem 1rem;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--ink);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.nav__cta:hover, .nav__cta:focus-visible {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ---------- burger (narrow only) ---------- */

.burger {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  margin: 5px auto;
  background: currentColor;
  transition: transform .3s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

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

.hero__copy {
  position: relative;
  z-index: 2;
  align-self: center;
  min-width: 0;
  /* Held inside the sky: past half the plate's width the flower bed climbs
     into the text's line boxes on a short viewport. */
  max-width: min(40rem, 48vw);
}

.eyebrow {
  margin: 0 0 clamp(1rem, 2.4vh, 1.5rem);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--stem);
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.4rem, 4.4vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -.005em;
}

.title__line { display: block; }


/* ---------- button ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 48px;          /* tap-target floor at every size below, too */
  margin-top: clamp(1.7rem, 4vh, 2.7rem);
  padding: .9rem 1.6rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn__arrow { width: 20px; height: 10px; flex: none; }

.btn:hover, .btn:focus-visible { background: var(--laven); color: var(--paper); }

/* ============================================================
   Narrow: the menu folds behind a burger and the headline
   steps down; everything else is the wide layout. The plate
   stays a full-bleed backdrop at every size — on a portrait
   screen it is the portrait cut of the same meadow, so cover
   never has to crop a 16:9 frame down to one flower.
   ============================================================ */

@media (max-width: 900px),
       (max-width: 1200px) and (orientation: portrait) {

  .burger { display: block; position: relative; z-index: 4; }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 3;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    /* only while the menu is open, and it replaces the view rather than
       tinting it — the footage never sits under a permanent scrim, and at
       anything short of opaque the headline ghosts through the links */
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .nav[data-open] { opacity: 1; visibility: visible; }

  .nav__link, .nav__cta { font-size: .84rem; }
  .nav__cta { min-height: 44px; padding: .7rem 1.4rem; }

  .hero__copy { max-width: none; }

  .title { font-size: clamp(2.2rem, 9.4vw, 3.2rem); }
}

/* ---------- portrait: the portrait plate ----------
   Its sky is the top half of the frame, and its own burnt-in headline sat at
   31-42% of the height — so the copy goes where that was rather than centred,
   which would run it down into the flowers. On a phone cover fits the plate by
   height and the position does nothing; on a portrait tablet it fits by width
   and trims the top, and 40% keeps the sky over the copy and the whole bed. */

@media (max-width: 1200px) and (orientation: portrait) {
  .hero__video { object-position: center 40%; }
  .hero__copy  { align-self: start; margin-top: clamp(3rem, 17svh, 12rem); }
}

/* ---------- small phones ---------- */

@media (max-width: 380px) {
  .title { font-size: clamp(1.95rem, 9.4vw, 2.35rem); }
}

/* ---------- short viewports (phone held sideways) ----------
   The landscape plate, cropped a fifth top to bottom: every pixel is spoken
   for, so the copy sets the floor. */

@media (max-height: 560px) and (min-width: 561px) {
  .hero { padding-bottom: 0; }

  /* Anchored to the top of the plate: taking the crop off the bottom drops the
     flower bed clear of the copy instead of running it up behind the text. */
  .hero__video { object-position: center top; }

  .hero__copy { max-width: min(30rem, 52vw); }

  .title { font-size: clamp(1.8rem, 5vw, 2.6rem); }
  .btn   { margin-top: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation: none !important; }
}