/* ==========================================================================
   TUOIL — hero
   Full-screen video, the headline on the left and the hexagon cluster
   stepping down on the right, both centred on the same horizon.
   ========================================================================== */

.s-hero {
  position: relative;
  display: flex;
  /* Usable height: the screen, less the cookie notice while it is up.
     Everything that has to stay on one screen is measured against this
     rather than against raw vh. */
  --hero-vh: calc(100svh - var(--cookie-height, 0px));
  /* Usable width: what is left inside the container. Everything in the hero
     is sized against this rather than against raw vw, because above 1600 the
     container stops growing and type that kept tracking vw would walk
     straight out of it. */
  --hero-w: calc(min(100vw, var(--container-max)) - var(--container-pad) * 2);
  min-height: 100vh;
  /* The cookie notice is fixed to the bottom of the screen and would
     otherwise eat into the frame the headline is centred on.
     --cookie-height is published by the notice while it is up and
     drops back to 0px once the visitor has answered, so the hero
     fills the part of the screen that is actually free. */
  min-height: var(--hero-vh);
  transition: min-height var(--dur-slow) var(--ease-out);
  overflow: hidden;
  background: var(--c-base-deep); /* the ground before the poster paints */
  color: var(--c-on-dark);
}

/* --- Media ------------------------------------------------------------------ */
.s-hero__media {
  position: absolute;
  inset: 0;
}

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

/* Soft gradients top and bottom keep the fixed logo and the burger readable
   over any frame; the left wash carries the headline. The band across the
   middle is the one the centred headline sits in, which is also where the
   footage is brightest. */
.s-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(12, 18, 8, 0.60) 0%,
      rgba(12, 18, 8, 0.16) 22%,
      rgba(12, 18, 8, 0.16) 72%,
      rgba(12, 18, 8, 0.76) 100%),
    linear-gradient(to right,
      rgba(12, 18, 8, 0.72) 0%,
      rgba(12, 18, 8, 0.60) 55%,
      rgba(12, 18, 8, 0.30) 100%);
}

/* --- Layout ------------------------------------------------------------------ */
.s-hero__inner {
  position: relative;
  z-index: var(--z-base);
  display: grid;
  grid-template-columns: minmax(0, auto) auto;
  align-items: center;
  gap: clamp(24px, 2vw, 40px);
  width: 100%;
  /* Even padding top and bottom: the headline and the cluster are centred on
     the frame, and the fixed header sits over the top of it. */
  padding-block: 112px;
}

/* The headline runs two lines and the claim sits beside the first of them,
   overhanging the second -- which is why the second line spans both columns
   instead of the two sharing one measure. Column 1 is then sized by the
   shorter first line and the claim starts beside it. */
.s-hero__text {
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: clamp(16px, 1.6vw, 26px);
}

/* The heading box is dissolved so its two lines become items of the grid
   above; the element itself, and so the h1 in the accessibility tree, stays. */
.s-hero__title {
  display: contents;
  font-family: var(--font-serif);
  font-weight: var(--fw-regular);
  /* 0.104 of the container, less 10%. The vh ceiling keeps the whole hero on one screen on short
     laptops. */
  font-size: clamp(2.4rem, min(calc(var(--hero-w) * 0.0938), calc(var(--hero-vh) * 0.205)), 8.5rem);
  line-height: 0.99;
  letter-spacing: -0.01em;
}

.s-hero__line:first-child { grid-area: 1 / 1; }
.s-hero__line:last-child  { grid-area: 2 / 1 / 3 / 3; }

.s-hero__accent {
  font-style: italic;
  /* The two italic words are about a third smaller than the
     roman ones, which is what keeps the first line shorter than the second
     and leaves the claim room to sit beside it. */
  font-size: 0.7em;
  color: var(--c-gold);
}

/* Three short lines of copy with a rule leading into them, set against the
   middle of the headline's first line. */
.s-hero__claim {
  grid-area: 1 / 2;
  align-self: center;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  margin: 0;
  padding-left: clamp(36px, 3.4vw, 56px);
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.62rem + 0.24vw, 0.875rem);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-on-dark);
}

.s-hero__claim::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: clamp(22px, 2.4vw, 40px);
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}

/* --- Hexagon cluster ----------------------------------------------------------
   A regular hexagon rotated by the 15deg system angle, so its bounding box is
   square. Two of its six edge directions are used: 0.893 / 0.252 of the box
   for a neighbour set down and to the right, and 0.252 / 0.893 for one set
   almost straight below. Both leave the same hairline gap between facing
   edges.

   The chain runs right, down, right --
   a staircase lying on its side, wider than it is tall, 3.038 boxes by 2.397.
   ------------------------------------------------------------------------- */
.s-hero__cluster {
  /* The cluster takes what the headline leaves of the row: the type runs to
     about two thirds of the usable width, so 0.097 of it per hexagon fills
     the rest without touching the longest line. The second ceiling is the
     height one, for short laptops. */
  --hex-size: clamp(100px, min(calc(var(--hero-w) * 0.097), calc((var(--hero-vh) - 240px) / 2.45)), 170px);
  position: relative;
  justify-self: end;
  width: calc(var(--hex-size) * 3.038);
  height: calc(var(--hex-size) * 2.397);
}

/* Staircase offsets, in units of the hexagon's own box. */
.s-hero__hex:nth-child(1) { --hx: 0;     --hy: 0; }
.s-hero__hex:nth-child(2) { --hx: 0.893; --hy: 0.252; }
.s-hero__hex:nth-child(3) { --hx: 1.145; --hy: 1.145; }
.s-hero__hex:nth-child(4) { --hx: 2.038; --hy: 1.397; }

.s-hero__hex {
  position: absolute;
  left: calc(var(--hx) * var(--hex-size));
  top: calc(var(--hy) * var(--hex-size));
  width: var(--hex-size);
  height: var(--hex-size);
  text-decoration: none;
  color: var(--c-on-dark);
}

.js .s-hero__hex[data-animate] { opacity: 0; }

.hex {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transition: transform 270ms var(--ease-out),
              filter 270ms var(--ease-out);
}

.hex__shape {
  position: absolute;
  inset: 0;
  background: var(--hex-fill);
  /* clip-path clips a box-shadow away, so the lift uses a drop-shadow filter
     on the parent instead */
  clip-path: polygon(63.4% 0, 100% 36.6%, 86.6% 86.6%, 36.6% 100%, 0 63.4%, 13.4% 13.4%);
  transition: background-color 270ms var(--ease-out);
}

.hex__label {
  position: relative;
  max-width: 78%;
  font-family: var(--font-body);
  /* Set off the hexagon rather than the screen, so the label keeps the same
     share of its shape at every size the cluster takes. */
  font-size: clamp(0.8125rem, calc(var(--hex-size) * 0.112), 1rem);
  font-weight: var(--fw-medium);
  line-height: 1.25;
  text-align: center;
}

.s-hero__hex:hover .hex,
.s-hero__hex:focus-visible .hex {
  transform: translateY(-6px) scale(1.06);
  filter: drop-shadow(0 14px 22px rgba(10, 16, 6, 0.45));
}

.s-hero__hex:hover .hex__shape,
.s-hero__hex:focus-visible .hex__shape { background: var(--hex-fill-lift); }

.s-hero__hex:hover,
.s-hero__hex:focus-visible { z-index: 2; }

/* The ring goes on the link, not on the clipped shape: clip-path would cut
   an outline drawn outside the hexagon straight off. */
.s-hero__hex:focus-visible {
  outline: 2px solid var(--c-on-dark);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}

/* The hero takes the lighter four rather than the accents
   the rest of the site runs on -- see the note beside them in tokens.css. */
.hex--oils { --hex-fill: var(--c-oils-hero); --hex-fill-lift: var(--c-oils-hero-lift); }
.hex--herbs { --hex-fill: var(--c-herbs-hero); --hex-fill-lift: var(--c-herbs-hero-lift); }
.hex--licorice { --hex-fill: var(--c-licorice-hero); --hex-fill-lift: var(--c-licorice-hero-lift); }
.hex--hydro { --hex-fill: var(--c-hydro-hero); --hex-fill-lift: var(--c-hydro-hero-lift); }

/* --- Adaptive --------------------------------------------------------------------- */
/* Short laptop screens: tighten the frame rather than let the headline and the
   cluster crowd each other. A 1366x768 or 1280x800 laptop with the cookie
   notice up has around 670px of usable height, and the vh term in the headline
   size has already pulled the type down by then, so all this has to do is give
   the two columns more room. */
@media (min-width: 1025px) and (max-height: 900px) {
  .s-hero__inner { padding-block: 88px; gap: clamp(24px, 3vw, 48px); }
}

/* 1280 and below: the claim drops under the headline while the cluster keeps
   its column. Beside the first line it needs about 250px that do not shrink
   with the type -- a fifth of the row at this width -- and taking it out of
   the row is what keeps the headline off the hexagons. */
@media (max-width: 1280px) {
  .s-hero__text { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-3); }
  .s-hero__line:first-child { grid-area: 1 / 1; }
  .s-hero__line:last-child { grid-area: 2 / 1; }
  .s-hero__claim {
    grid-area: 3 / 1;
    align-self: start;
    padding-left: 0;
    padding-top: var(--sp-3);
  }
  .s-hero__claim::before { top: 0; left: 0; width: clamp(40px, 6vw, 64px); }

  /* With the claim gone from beside the first line the type ends around 0.6
     of the row instead of two thirds, and the cluster takes the difference. */
  .s-hero__cluster {
    --hex-size: clamp(100px, min(calc(var(--hero-w) * 0.115), calc((var(--hero-vh) - 240px) / 2.45)), 170px);
  }
}

/* Below 1024 the two columns become two rows: the headline first, the cluster
   under it, both running the full width. The wash has to start climbing much
   earlier than it does on a desktop, or the white heading falls under 3:1
   against the haze. The side gradient goes: with full-width text a wash
   weighted to the left buys nothing. */
@media (max-width: 1024px) {
  .s-hero__scrim {
    background: linear-gradient(to bottom,
      rgba(12, 18, 8, 0.66) 0%,
      rgba(12, 18, 8, 0.40) 15%,
      rgba(12, 18, 8, 0.66) 40%,
      rgba(12, 18, 8, 0.88) 100%);
  }

  .s-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    /* The rows sit together in the middle of the screen rather than being
       pushed apart by the space the frame has left over. */
    align-content: center;
    gap: var(--sp-5);
    padding-block: 112px var(--sp-6);
  }
  .s-hero__text { grid-row: 1; row-gap: var(--sp-4); }

  /* The same staircase, under the headline. It lies on its side, so it is the
     width that sizes it here -- the full measure where the height allows --
     and the height left under the type that caps it. */
  .s-hero__cluster {
    --hex-size: clamp(84px, min(calc(var(--hero-w) / 3.05), calc((var(--hero-vh) - 460px) / 2.4)), 170px);
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
  }
}

@media (max-width: 768px) {
  /* The cookie notice is around 200px tall on a phone, which is most of what
     the hero has to give. The padding and the gap come in so the cluster costs
     no more room than it has to. */
  .s-hero__inner {
    gap: var(--sp-4);
    padding-block: 84px var(--sp-4);
  }
  .s-hero__text { row-gap: var(--sp-3); }

  /* A phone has width to spare and height to save, so the headline is set off
     the width alone and larger than the desktop formula would make it. */
  .s-hero__title { font-size: clamp(2.75rem, 13.4vw, 4rem); }
  .s-hero__claim { font-size: clamp(0.8125rem, 0.7rem + 0.6vw, 1rem); }

  /* the headline block is shorter on a phone, so it leaves the cluster more */
  .s-hero__cluster {
    --hex-size: clamp(84px, min(calc(var(--hero-w) / 3.05), calc((var(--hero-vh) - 400px) / 2.4)), 170px);
  }
}