/* =============================================================================
   polish.css — additive polish layer.

   Kept separate from the core design (concept-1.css) so every refinement here
   can be reviewed, tuned or removed in one place.

   Covers:
     1. Announcement bar (dismissible, quieter against the header)
     2. Micro-interactions and scroll rhythm (entrances, rail, buttons)
     3. Page-load transition
     4. Editorial hairline rules
     5. Mobile rhythm
     6. Rail as a slim navigator, and navigator-exact section heights

   v2 (29 Sep 2026) removed the layers for retired components: product-card
   reveal, hero pack shot, trust marks, story gallery, community videos and
   the where-to-buy rows. They are recoverable from the microsite-v1-final tag.
============================================================================= */

/* -----------------------------------------------------------------------------
   1. Announcement bar
-------------------------------------------------------------------------- */

.c1-announce {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-inline: calc(var(--gutter) + 28px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Sticky: the bar stays at the top of the screen and the header sticks just beneath it. polish.js adds
   .announce-sticky to <html> and sets --announce-h (the bar's height; 0 once it is dismissed). Without
   JavaScript the bar scrolls away as before. */
.announce-sticky .c1-announce {
  position: sticky;
  top: 0;
  z-index: 51;
}

.announce-sticky .c1-header {
  top: var(--announce-h, 0px);
}

.c1-announce a {
  transition: opacity 0.25s ease, text-underline-offset 0.25s ease;
}

.c1-announce a:hover {
  text-underline-offset: 5px;
}

.c1-announce__close {
  position: absolute;
  top: 50%;
  right: calc(var(--gutter) - 6px);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.6;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.25s ease, background-color 0.25s ease;
}

.c1-announce__close:hover,
.c1-announce__close:focus-visible {
  opacity: 1;
  background: rgba(26, 26, 24, 0.12);
}

.c1-announce.is-dismissed {
  display: none;
}

/* -----------------------------------------------------------------------------
   2. Micro-interactions and scroll rhythm
-------------------------------------------------------------------------- */

/* Section entrances. Elements are visible by default and only hidden once
   JS confirms it can animate them, so no-JS visitors and crawlers see
   everything. */
.js-anim [data-polish-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.9s cubic-bezier(0.32, 0.72, 0, 1);
  transition-delay: var(--anim-delay, 0ms);
}

.js-anim [data-polish-animate].is-in {
  opacity: 1;
  transform: none;
}

/* Sections receive focus programmatically after an in-page link (polish.js)
   so the next Tab continues from there; the section itself needs no ring. */
main > section:focus {
  outline: none;
}

/* Rail: the dot and label settle instead of snapping. */
.c1-rail a {
  transition: color 0.35s ease, opacity 0.35s ease;
}

.c1-rail__dot {
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
    background-color 0.35s ease, opacity 0.35s ease;
}

.c1-rail a:hover .c1-rail__dot,
.c1-rail a.is-active .c1-rail__dot {
  transform: scale(1.35);
}

/* Buttons and nav links across the page. One family, three tiers: solid pill,
   ghost pill and the editorial link share the same arrow detail, the same
   0.2/0.7/0.2/1 timing and the same hover lift, so every action on the page
   moves identically. */
.c1-btn {
  gap: 12px;
  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 0.35s ease;
}

.c1-btn:hover {
  transform: translateY(-2px);
}

.c1-btn:active {
  transform: translateY(0);
}

/* Solid pills get the same quiet lift-shadow everywhere, not just the hero. */
.c1-btn--solid:hover,
.c1-btn--solid:focus-visible {
  box-shadow: 0 14px 28px -14px rgba(74, 77, 63, 0.4);
}

.c1-btn--solid:active {
  box-shadow: none;
}

/* The shared arrow: drawn in currentColor so it inherits solid cream, ghost
   ink and the nav's ink automatically. It eases forward on hover. */
.c1-btn__arrow {
  flex: none;
  margin-top: 1px;
  transform: translateX(0);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.c1-btn:hover .c1-btn__arrow,
.c1-btn:focus-visible .c1-btn__arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .c1-btn__arrow {
    transition: none;
  }
}

.c1-nav__links a,
.c1-nav__stockists {
  position: relative;
}

.c1-nav__links a::after,
.c1-nav__stockists::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
}

.c1-nav__links a:hover::after,
.c1-nav__links a:focus-visible::after,
.c1-nav__stockists:hover::after,
.c1-nav__stockists:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

@media (prefers-reduced-motion: reduce) {
  .js-anim [data-polish-animate],
  .c1-btn {
    transition: none;
    transform: none;
  }

  .js-anim [data-polish-animate] {
    opacity: 1;
  }
}

/* -----------------------------------------------------------------------------
   3. Page-load transition
   A short, restrained settle on first paint. Armed only by JS, so a no-JS
   visitor never sees a blank page.
-------------------------------------------------------------------------- */

.js-load body {
  opacity: 0;
  transform: translateY(10px);
}

.js-load.is-loaded body {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.32, 0.72, 0, 1);
}

.js-load .c1-hero__copy > * {
  opacity: 0;
  transform: translateY(14px);
}

.js-load.is-loaded .c1-hero__copy > * {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease var(--load-delay, 0ms),
    transform 0.9s cubic-bezier(0.32, 0.72, 0, 1) var(--load-delay, 0ms);
}

/* -----------------------------------------------------------------------------
   4. Editorial hairline rules
   A fine full-width rule above each section head.
-------------------------------------------------------------------------- */

.c1-section__head,
.c1-stockists__head {
  position: relative;
}

.c1-section__head::after,
.c1-community__head::after,
.c1-stockists__head::after {
  content: "";
  position: absolute;
  top: -18px;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(26, 26, 24, 0.12);
}

/* -----------------------------------------------------------------------------
   5. Mobile rhythm
-------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .c1-hero__copy h1 {
    line-height: 1.06;
    letter-spacing: -0.01em;
  }

  .c1-hero__lede,
  .c1-lede {
    max-width: 34ch;
  }

  .c1-section__head {
    margin-bottom: 28px;
  }
}

/* -----------------------------------------------------------------------------
   6. Rail as a slim navigator
-------------------------------------------------------------------------- */

/* The original rail was hidden below 1500px and, above it, stayed permanently
   open with every label showing. Keep the slim dot-only version at every
   desktop width instead — no upper bound — so a large monitor gets the same
   quiet pocket navigator as an ordinary laptop, opening into the full
   editorial index only on hover or keyboard focus. Width is animated on the
   rail itself so the closed state stays put until then. */
@media (min-width: 1000px) {
  .c1-rail[class] {
    display: flex;
    right: 14px;
    width: 42px;
    min-width: 42px;
    padding: 14px 10px;
    gap: 11px;
    border-radius: 999px;
    overflow: hidden;
    transition: width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      min-width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      padding 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      border-radius 0.45s ease, background-color 0.35s ease;
  }

  .c1-rail[class]:hover,
  .c1-rail[class]:focus-within {
    width: 166px;
    min-width: 166px;
    padding: 20px 18px;
    gap: 14px;
    border-radius: 22px;
    background: rgba(245, 242, 234, 0.9);
  }

  .c1-rail[class] a {
    width: 100%;
    min-height: 20px;
    padding: 2px;
    gap: 0;
    font-size: 0;
    letter-spacing: 0;
    justify-content: center;
  }

  .c1-rail[class] a span:not(.c1-rail__dot) {
    display: block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateX(8px);
    transition: max-width 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
      opacity 0.25s ease 0.05s, transform 0.35s ease;
  }

  .c1-rail[class]:hover a,
  .c1-rail[class]:focus-within a {
    min-height: 20px;
    gap: 12px;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    justify-content: flex-end;
  }

  .c1-rail[class]:hover a.is-active,
  .c1-rail[class]:focus-within a.is-active {
    font-size: 12px;
    letter-spacing: 0.14em;
  }

  .c1-rail[class]:hover a span:not(.c1-rail__dot),
  .c1-rail[class]:focus-within a span:not(.c1-rail__dot) {
    max-width: 112px;
    opacity: 1;
    transform: none;
  }

  .c1-rail[class] .c1-rail__dot {
    width: 5px;
    height: 5px;
  }
}

@media (min-width: 1000px) and (prefers-reduced-motion: reduce) {
  .c1-rail[class],
  .c1-rail[class] a span:not(.c1-rail__dot) {
    transition: none;
  }
}

/* Navigator destinations occupy only the space below the sticky header. The
   header value is measured by polish.js, so this remains exact if its height
   changes at another desktop or tablet width. */
/* In-page links and deep links land below the sticky header at every width
   (phones included: links from social bios most often arrive there). */
html {
  scroll-padding-top: var(--fit-header, 72px);
}

@media (min-width: 700px) {
  [data-fit][data-fit] {
    min-height: calc(100svh - var(--fit-header, 72px));
  }

  /* The first section also sits below the announcement bar. Without this the
     rule above (same specificity, later) overrode fit.css's first-section
     height and the hero overflowed its screen by the bar's height. */
  [data-fit][data-fit-first][data-fit-first] {
    min-height: calc(100svh - var(--fit-chrome, 98px));
    /* Its snap point must be the very top of the page. Without this the
       snap aligns the hero with the header and every load scrolls down by
       the announcement bar's height, hiding the bar. */
    scroll-margin-top: calc(var(--fit-chrome, 98px) - var(--fit-header, 72px));
  }
}

@media (min-width: 700px) and (max-width: 1439px) {
  .c1-wrap {
    padding-right: max(var(--gutter), 64px);
  }
}

@supports not (height: 100svh) {
  @media (min-width: 700px) {
    [data-fit][data-fit] {
      min-height: calc(100vh - var(--fit-header, 72px));
    }
  }
}