/* OSiAN version 2
   Large type is capped in rem, so from roughly 1350px upward words such as
   PROTECTION and BALANCE stay one pixel size while the stage gets narrower
   and they run into the corner tiles and the can.
   Each size below is the same pixel value as that cap once the stage is
   1400px wide, and a percentage of the stage below that. Stage height uses
   the same factor as version 1, so a short window still shrinks the type.
   Under 961px the original mobile rules stay in charge. */

@media (min-width: 961px) {
  body.osian-v2 {
    --osian-wrap: min(1400px, 92vw);
    /* drop the 260px floor so a narrow stage can keep the tiles beside the can */
    --cwl: min(500px, 33vw, max(0px, calc(var(--wraphalf) - var(--canzone))));
  }

  body.osian-v2 .corner {
    width: min(320px, 21vw, max(0px, calc(var(--wraphalf) - var(--canzone))));
  }

  /* Hero intro and the 2×2 fact grid share one width. About 20% wider
     so the copy wraps less and the blocks stay shorter on small windows. */
  body.osian-v2 .hero .bl,
  body.osian-v2 .hero .br {
    width: min(384px, 25.2vw, max(0px, calc((var(--wraphalf) - var(--canzone)) * 1.2)));
  }

  /* ENERGY, BALANCE, PROTECTION, CLARITY — one size for the whole set.
     On a full stage this matches version 1. On a short or narrow window
     (a 13-inch MacBook) the slope steepens so PROTECTION stays clear of
     the corner tiles. */
  body.osian-v2 .drink .display .word {
    font-size: max(6rem, min(
      calc(var(--osian-wrap) * 0.16),
      calc(0.34 * var(--stageh)),
      max(0px, calc(0.52 * var(--osian-wrap) - 504px)),
      max(0px, calc(0.62 * var(--stageh) - 210px))
    ));
  }

  body.osian-v2 .hero .display .word {
    font-size: min(calc(var(--osian-wrap) * 0.183), calc(0.35 * var(--stageh)));
  }

  body.osian-v2 .hero .display .sub {
    font-size: min(calc(var(--osian-wrap) * 0.16), calc(0.33 * var(--stageh)));
  }

  body.osian-v2 .o-title {
    font-size: min(calc(var(--osian-wrap) * 0.0617), calc(0.15 * var(--stageh)));
  }

  body.osian-v2 .r-left .o-title {
    font-size: min(calc(var(--osian-wrap) * 0.0914), calc(0.24 * var(--stageh)));
  }

  body.osian-v2 .s-copy h2,
  body.osian-v2 .rhead h2 {
    font-size: min(calc(var(--osian-wrap) * 0.0526), calc(0.16 * var(--stageh)));
  }

  body.osian-v2 .ctapanel h2 {
    font-size: min(calc(var(--osian-wrap) * 0.048), calc(0.16 * var(--stageh)));
  }

  /* FLOW, CORE, GLOW, FOCUS stay on FLOW's height. The acts tile stays
     on the bottom, flush with the right-hand claim. The spare space sits
     between the flavour line and "What it is built on". */
  body.osian-v2 .drink .bl.stack {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    bottom: 0;
    top: auto;
  }

  body.osian-v2 .drink .bl.stack .acts-tile {
    margin-top: auto;
  }

  body.osian-v2 .drink .br.stack {
    bottom: 0;
    top: auto;
  }
}

/* A maximized Chrome window on a 1920×1080 Windows screen is wide enough
   to sit on the large-type cap, but the window is not tall. MacBooks never
   reach this width in CSS pixels, so their size stays as it is. */
@media (min-width: 1600px) and (max-height: 1100px) {
  body.osian-v2 .drink .display .word {
    font-size: max(6rem, min(
      calc(var(--osian-wrap) * 0.125),
      calc(0.34 * var(--stageh)),
      max(0px, calc(0.52 * var(--osian-wrap) - 504px))
    ));
  }

  body.osian-v2 .hero .display .word {
    font-size: min(calc(var(--osian-wrap) * 0.145), calc(0.35 * var(--stageh)));
  }

  body.osian-v2 .hero .display .sub {
    font-size: min(calc(var(--osian-wrap) * 0.125), calc(0.33 * var(--stageh)));
  }
}

/* On a short desktop the 01/04 line sits on the header wordmark and on
   the variant logo under it. Open the gap above that logo, and give the
   same space back by tightening the wordmark so the number does not
   climb any higher. */
@media (min-width: 961px) and (max-height: 980px) {
  body.osian-v2 .drink .num {
    margin-bottom: 1.2rem;
  }

  body.osian-v2 .drink .vmark {
    height: clamp(32px, 3.1vw, 46px);
    margin-top: .15rem;
  }

  body.osian-v2 .drink .vtag {
    margin-top: .4rem;
  }

  body.osian-v2 .drink .tile:not(.bare) {
    padding-top: .55rem;
    padding-bottom: .55rem;
  }

  body.osian-v2 .drink .apanel {
    margin-top: .45rem;
    padding-top: .4rem;
  }
}

/* Hero intro copy, a step smaller on a compact window. */
@media (min-width: 961px) and (max-width: 1600px),
       (min-width: 961px) and (max-height: 1100px) {
  body.osian-v2 .hero .claimline {
    font-size: clamp(1.02rem, 1.5vw, 1.35rem);
  }

  body.osian-v2 .hero .lede {
    font-size: .88rem;
    line-height: 1.5;
  }

  body.osian-v2 .hero .btn {
    margin-top: .4rem;
    padding: .4rem .78rem;
    font-size: .7rem;
    gap: .3rem;
  }

  body.osian-v2 .hero .btn svg {
    width: 11px;
    height: 11px;
  }
}

/* Phones and tablets. The desktop block above is untouched.
   A few stacks still span two columns after the parent has
   collapsed to one, which opens a second track and pulls the
   next block up beside them. Long copy was also forced into
   the two-up tile grid, and the closing cans kept their
   desktop height, so they covered the panel. */
@media (max-width: 960px) {
  body.osian-v2 .hero .br {
    width: auto;
    max-width: none;
  }

  body.osian-v2 .drink .br.stack {
    grid-template-columns: minmax(0, 1fr);
  }

  body.osian-v2 .drink .br .tile:last-child {
    display: flex;
  }

  body.osian-v2 #range .rwrap {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 1.1rem;
  }

  body.osian-v2 #range .rhead,
  body.osian-v2 #range .rangefig,
  body.osian-v2 #range .vgrid {
    grid-column: 1 / -1;
    width: auto;
    max-width: 100%;
    margin: 0;
    justify-self: stretch;
  }

  body.osian-v2 .cta .ctacan.a,
  body.osian-v2 .cta .ctacan.b {
    width: auto;
    height: 42%;
  }

  body.osian-v2 .cta .ctacan.a {
    left: -16%;
    bottom: -20%;
    top: auto;
  }

  body.osian-v2 .cta .ctacan.b {
    right: -16%;
    top: -18%;
    bottom: auto;
  }
}

@media (max-width: 620px) {
  body.osian-v2 .t-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.osian-v2 .t-cta {
    grid-column: 1 / -1;
  }

  /* A phone is shorter than the desktop stage. Keep the cans
     and the fact tiles inside the band above the variant bar,
     so a card is not cut in half by that bar. */
  body.osian-v2 .stage {
    gap: .4rem;
  }

  body.osian-v2 .hero .can {
    margin-top: .45rem;
  }

  body.osian-v2 .hero .can .back img,
  body.osian-v2 .hero .can .front img {
    height: clamp(136px, 20svh, 156px);
  }

  body.osian-v2 .hero .br .tile {
    padding: .5rem .6rem;
    gap: .4rem;
  }

  body.osian-v2 .hero .br .badge .ic {
    width: 32px;
    height: 32px;
  }

  body.osian-v2 .hero .br .badge b {
    font-size: .9rem;
  }

  body.osian-v2 .hero .br .badge span {
    font-size: .72rem;
    line-height: 1.25;
  }

  body.osian-v2 .drink .can img {
    height: clamp(132px, 18svh, 148px);
  }

  body.osian-v2 .drink .tile.bare {
    padding-top: 0;
    padding-bottom: 0;
  }

  body.osian-v2 .drink .num {
    margin-bottom: .15rem;
  }

  body.osian-v2 .drink .vmark {
    height: 34px;
    margin-top: .1rem;
  }

  body.osian-v2 .drink .vtag {
    margin-top: .2rem;
    font-size: 1.15rem;
  }

  body.osian-v2 .drink .vsub {
    margin-top: .15rem;
    font-size: .88rem;
  }

  body.osian-v2 .drink .acts-tile {
    padding-top: .7rem;
    padding-bottom: .7rem;
  }

  body.osian-v2 .drink .apanel {
    margin-top: .4rem;
    padding-top: .4rem;
  }

  body.osian-v2 .drink .aclaim {
    font-size: .82rem;
    line-height: 1.45;
  }
}