/* ============================================================
   Zensen — hero section

   The plate is a cherry tree on a floating island at sunset.
   Measured over the loop, as the contrast each text colour
   keeps against the worst frame of each cell of the plate:

     dark ink, upper right sky  x 0.75-1.00  y 0.00-0.33  4.9-7.9:1
     dark ink, upper left sky   x 0.00-0.19  y 0.17-0.33  3.6-4.7:1
     dark ink, over the island                            0.9-2.2:1
     paper white, anywhere                                1.0-4.3:1

   Light type is out: the plate is bright in every corner at
   some point in the loop. So the copy is ink, and it lives in
   the upper right sky — the only block wide enough to set two
   lines in — while the island is held left of centre so that
   sky opens up. Nothing is laid over the footage.

   The clip plays forward only: the steady middle of it, with
   the last 30 frames dissolved into the first, because the raw
   plate cuts at the loop point and eases in and out.

   Type is the Zen pair: Old Mincho, whose brush-cut serifs
   belong to the subject, for the headline; Kaku Gothic New,
   plain and signlike, for the nav.
   ============================================================ */

:root {
  --sumi:   #1B1726;   /* ink: the trunk's deepest shadow */
  --beni:   #C2405C;   /* safflower: the mark, and focus */
  --paper:  #F4EFEA;   /* the narrow ground, and the pill */
  --hair:   rgba(27, 23, 38, .22);

  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --gothic: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --gutter: clamp(1.25rem, 3.4vw, 3rem);
  --ease:   cubic-bezier(.22, .61, .36, 1);
}

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

html, body { margin: 0; }

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

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

:focus-visible { outline: 2px solid var(--beni); 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;
  /* Held to the right of its own frame: on anything narrower than 16:9 cover
     trims the sides, and taking that trim off the left carries the island away
     from the copy instead of into it — 350px of clear sky at 16:10 rather than
     270px. At 16:9 there is no trim and the framing is the plate's own. */
  object-position: 100% center;
  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.2rem, 3vh, 2rem);
}

/* Set at 24px and up on purpose: the upper-left sky is the plate's darkest
   corner and holds ink at 3.1-3.7:1, which carries large text and nothing
   smaller. The nav sits right, over sky that holds 4.9-6.7:1. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mincho);
  font-weight: 700;
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  letter-spacing: .04em;
}

.brand__front { width: 34px; height: 16px; flex: none; color: var(--beni); }
.brand__word  { white-space: nowrap; }

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

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 1.9rem);
}

.nav__link,
.nav__cta {
  font-family: var(--gothic);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
}

.nav__link {
  color: var(--sumi);
  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(--beni); border-color: currentColor; }

/* the one nav item that can drift over an islet on a short viewport, so it
   brings its own ground rather than sitting on a scrim laid over the footage */
.nav__cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .45rem 1.1rem;
  border: 1px solid var(--hair);
  background: var(--paper);
  color: var(--sumi);
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease);
}
.nav__cta:hover, .nav__cta:focus-visible {
  background: var(--sumi);
  border-color: var(--sumi);
  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;
  justify-self: end;
  /* Held to the top third: the small floating islets drift through the right
     of the plate from 0.39 of its height down, and ink falls to 2.1:1 there. */
  align-self: start;
  margin-top: clamp(.25rem, 2vh, 1.5rem);
  min-width: 0;
  max-width: min(23rem, 32vw);
}

.title {
  margin: 0;
  font-family: var(--mincho);
  font-weight: 600;
  /* capped where the longer line still fits the clear sky beside the island */
  font-size: clamp(1.6rem, 2.2vw, 2.15rem);
  line-height: 1.28;
  letter-spacing: -.005em;
}

.title__line { display: block; }

/* ============================================================
   Narrow: the plate stays the whole screen. Cover on a phone
   shows a quarter of a 16:9 frame, so the trim is taken off
   the left — that window keeps the canopy overhead, the far
   waterfall and the drifting islets, and it is the only window
   whose top strip holds ink (6.2:1) for the two lines.
   ============================================================ */

@media (max-width: 900px), (max-height: 560px) {

  .hero { padding-bottom: 0; }

  .topbar     { padding-block: clamp(.9rem, 2.2vh, 1.4rem); }
  .hero__copy { margin-top: clamp(.5rem, 2.4vh, 1.6rem); }

  /* Held further left than on the desktop: at this aspect cover keeps only
     about a quarter of the frame, and 90% is the point where the canopy still
     reaches into the top corner while the strip under it stays clear sky. */
  .hero__video { object-position: 90% center; }

  .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 */
    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: .9rem; }
  .nav__cta { min-height: 44px; padding: .7rem 1.4rem; }

  /* right, as on the desktop: the canopy rides up the left of this window
     as the viewport widens, and the sky beside it stays clear */
  .hero__copy {
    justify-self: end;
    align-self: start;
    max-width: min(24rem, 100%);
  }

  .title { font-size: clamp(1.7rem, 6.6vw, 2.2rem); line-height: 1.24; }
}

/* ---------- phones held upright ----------
   These get their own upright cut of the scene, so cover trims about 18% of
   the width and the frame stays close to the one the shot was composed in.
   The trim comes off both sides, which leaves the tree centred; measured over
   the loop that costs almost nothing against holding it right — headline 4.0
   rather than 4.1:1, brand 3.3 rather than 3.4:1, both over the 3:1 floor
   large text carries. */

@media (max-width: 600px) and (orientation: portrait) {
  .hero__video { object-position: center; }
}

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

@media (max-width: 380px) {
  .title { font-size: 1.62rem; }
}

/* ---------- short viewports (phone held sideways) ----------
   Wider than 16:9, so cover trims the top and the bottom instead of the
   sides. The trim comes off the bottom, which lifts the clear strip above
   the canopy into the screen and leaves the two lines room beside the nav. */

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

  .topbar { padding-block: clamp(.4rem, 2vh, .8rem); }

  .hero__video { object-position: 100% 0%; }

  .hero__copy {
    justify-self: end;
    align-self: start;
    margin-top: .1rem;
    max-width: min(15rem, 32vw);
  }

  .title { font-size: clamp(1.05rem, 2.5vw, 1.25rem); line-height: 1.2; }
}

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