/* CHANGE 25 — the homepage product bands (sections/rootist_band, assets/rootist-band.js).
   Rootist's banner art baked an arch and a ring of type ("for dry + damaged hair") into a flat picture. Here the arch
   is a band that runs off the edge of the window, the ring is live text on a track just outside it, and the words
   travel round the track as the page scrolls. The script draws the band, the track and the lime line to fit the
   layout; without it the copy and the bottle's first view still show.
   --band is the band's height, --ring the words' size, --lift the bottle's height in band heights.
   Colours: ink #672c45, soft ink rgb(103 44 69 / 0.78), lime #e4e825. Display serif = the theme's 'Fraunces'.
   Sizes by width: heading 48px/52px, 40px/44px from 1068px down, 32px/36px from 734px down; intro 21px/29px,
   19px/27px, 17px/25px. */
.rt-band {
  --band: clamp(240px, 28vw, 400px);
  --ring: calc(var(--band) * 0.085);
  --lift: 1.55;
  position: relative;
  overflow: hidden;
  padding: calc(var(--band) * (var(--lift) - 1) + 72px) 0 calc(var(--ring) * 1.4 + 112px);
}
.rt-band .rt-band-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: hidden; pointer-events: none; }
.rt-band-shape { fill: var(--rt-band-fill, #f5b56b); }
/* Rootist's lime line (their banners drew routes with it; so does the bottle's label): from the edge of the window,
   over one hump or down one step, and into the ring beside the bottle, drawn in as the band arrives. 4.5px on phones
   up to 6px on wide screens, half as heavy again as the lines in their own banner art. */
.rt-band-line { fill: none; stroke: #e4e825; stroke-width: calc(var(--band) * 0.009375 + 2.25px); stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  /* pathLength="1" (set by the script): a dash of 1, offset by 1, hides the whole line at any length, so nothing moves
     before the band is lit. A measured length set after load used to slide the dash and glitch on reload. */
  .rt-band-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(0.3, 0, 0.2, 1); }
  /* Drawn, it rests; now and then the script runs it forward, off the end and in again (run, rootist-band.js). */
  .rt-band.is-lit .rt-band-line { stroke-dashoffset: 0; }
}
.rt-band-words { fill: #672c45; font: 400 var(--ring)/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.01em; }
.rt-band-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: clamp(48px, 7vw, 112px);
  align-items: center;
}
.rt-band[data-rt-band="left"] .rt-band-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rt-band[data-rt-band="left"] .rt-band-stage { order: -1; }
/* The stage is the band's rounded end: the band's height, its outer edge on the side facing the copy. The bottle
   stands just past the arc's centre and rises out of the top through the words. Its base is cut off a little by the
   band's lower edge, as in their banner art, rather than balancing on it. */
.rt-band-stage { position: relative; height: var(--band); }
.rt-band-product { position: absolute; bottom: calc(var(--band) * -0.05); height: calc(var(--band) * var(--lift)); clip-path: inset(0 0 calc(var(--band) * 0.05) 0); }
.rt-band[data-rt-band="right"] .rt-band-product { left: calc(var(--band) * 0.74); transform: translateX(-50%); }
.rt-band[data-rt-band="left"] .rt-band-product { right: calc(var(--band) * 0.705); transform: translateX(50%); }
/* The bottle turns as the page scrolls: its views stacked, only ever one showing. The first view sets the bottle's
   width. Without script, or with reduced motion, the first view. */
.rt-band .rt-turn img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; }
.rt-band .rt-turn img:first-child { position: relative; display: block; width: auto; opacity: 1; }

/* Copy. The theme sets every h2 to 40px with !important (.rootist-store h2) and every paragraph's margin to 0
   (.rootist-store p), so these need the extra specificity. */
.rootist-store .rt-band h2.rt-h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 48px !important; line-height: 52px !important; letter-spacing: -0.005em; color: #672c45; text-wrap: balance; }
.rt-band .rt-band-copy .rt-intro { margin: 20px 0 0; max-width: 32em; font: 400 21px/29px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.011em; color: rgb(103 44 69 / 0.78); text-wrap: pretty; }
.rt-band .rt-band-copy .rt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 32px; }
.rt-band .rt-link { display: inline-flex; align-items: center; gap: 8px; color: #672c45; font: 700 14px/18px "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; }
.rt-band .rt-link:hover { opacity: 0.72; }
.rt-band .rt-link:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.rt-band .rt-link span[aria-hidden="true"] { display: inline-block; transition: transform 0.2s ease; }
.rt-band .rt-link:hover span[aria-hidden="true"] { transform: translateX(3px); }

@media (max-width: 1068px) {
  .rootist-store .rt-band h2.rt-h2 { font-size: 40px !important; line-height: 44px !important; }
  .rt-band .rt-band-copy .rt-intro { font-size: 19px; line-height: 27px; }
}
@media (max-width: 900px) {
  /* Stacked: the band first, running off its edge of the screen, the copy under it. */
  .rt-band { --band: min(62vw, 300px); padding: calc(var(--band) * (var(--lift) - 1) + 40px) 0 88px; }
  .rt-band-grid,
  .rt-band[data-rt-band="left"] .rt-band-grid { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--ring) * 1.4 + 40px); }
  .rt-band-stage { order: -1; }
  .rt-band[data-rt-band="right"] .rt-band-stage { margin-left: calc(var(--ring) * 1.3); }
  .rt-band[data-rt-band="left"] .rt-band-stage { margin-right: calc(var(--ring) * 1.3); }
}
@media (max-width: 734px) {
  .rootist-store .rt-band h2.rt-h2 { font-size: 32px !important; line-height: 36px !important; }
  .rt-band .rt-band-copy .rt-intro { font-size: 17px; line-height: 25px; letter-spacing: -0.01em; }
  .rt-band .rt-band-copy .rt-actions { gap: 16px 24px; margin-top: 28px; }
}