/* The drink band: a strip of drinks you scroll side to side, each with its details already in the
   page beneath it.

   Tokens come from css/site.css, but every var() here carries its own fallback so the file is
   readable on its own and in a test fixture that loads nothing else.

   One rule governs everything below: the strip is a plain overflow-x scroller with scroll snapping,
   so touch, trackpad, keyboard and a visitor with no JavaScript all get a complete band from CSS
   alone. js/carousel.js adds the endless strip, the centre stage and the disclosure, and it
   announces itself by putting `is-live` on the root. Nothing that hides content is allowed outside
   an `.is-live` selector: with JS off every drink and every detail stays on the page, in order.

   Three things this file has to hold in its head at once:

   - THE TRACK CLIPS. overflow-x: auto makes the block axis `auto` too, so anything inside the
     track that grows taller than a cell is clipped rather than growing the page. Nothing in here
     grows. The details are the card's BACK FACE, laid over a front face that stays in flow and is
     what gives the card its height; both the turn and the centre stage's enlargement are
     transforms, which paint outside the box without changing the layout the track is measuring.
     The room they paint into is the track's own padding, which is what the 3rem at the top is for.
   - THE SCENERY MATCHES THE CANS. `.carousel-ghost` is a repeat of a cell, drawn so the strip has
     no end. It must look identical to `.carousel-cell` at every width and in every mode, so the
     two share every rule; only their accessibility differs.
   - THE SET SCALE IS MOTION. The can at the midpoint is bigger than the rest. Under reduced motion
     it is still bigger - it just arrives there without travelling.

   .carousel-sr duplicates the .sr-only helper in css/brand.css under its own name on purpose -
   this file must stand up without brand.css, and two files declaring the same class is the kind of
   collision that bites later. Fold them together when the two stylesheets are next merged. */

.carousel-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ---- The strip ---- */
.carousel-track {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--gutter, 1.5rem);
  /* The top gutter is the room the card at the midpoint grows into, and since 2026-10-29 the room
     it TURNS in: measured at 1440, where the cards are widest, a card half way through its turn
     reaches 11px higher than one sitting still at 1.06. It is a scroller, so anything outside this
     padding is clipped rather than drawn - see the note at the head of the file. */
  padding: 3.75rem var(--gutter, 1.5rem) 1.75rem;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

/* The band can be dragged with a mouse (js/carousel.js), and the cursor is the only thing that
   says so on a pointer device - there is no scrollbar and there are no arrows. Only where a mouse
   is the input: on a touchscreen the band is dragged with a finger and there is no cursor to set.
   grab/grabbing is the browser's own metaphor for this, which is apple-design 16.4, familiarity. */
@media (hover: hover) and (pointer: fine) {
  .carousel.is-live .carousel-track { cursor: grab; }
  .carousel.is-live .carousel-track.dragging { cursor: grabbing; }
}
/* Snap is suspended for the length of the gesture. With `scroll-snap-type: x mandatory` still on,
   every scrollLeft written during the drag is re-snapped by the engine and the band jumps between
   cards instead of following the pointer - which is the 1:1 tracking in apple-design 2. It comes
   back the instant the finger lifts, and the landing is chosen by projection (6) rather than by
   the snap points. */
.carousel-track.dragging { scroll-snap-type: none; scroll-behavior: auto; user-select: none; }
/* The same two suspensions while the band is gliding to a target under its own spring
   (js/carousel.js). Both are load-bearing, for different reasons:
     scroll-snap-type - with mandatory snap on, the engine re-snaps after every scrollLeft the
       spring writes, so the band jumps between cards instead of flowing to one.
     scroll-behavior  - the track is `scroll-behavior: smooth`, so each of those writes would
       start its OWN browser animation. Sixty nested animations a second is not a spring.
   No cursor change here, unlike .dragging: nothing is being held. */
.carousel-track.gliding { scroll-snap-type: none; scroll-behavior: auto; }
/* And for the length of a press, before it is known whether it is a tap or a drag. See the
   note in js/carousel.js's pointerdown: without it, catching a moving band let snap pull it
   to the nearest card the instant the glide stopped, before the hand had moved at all. */
.carousel-track.holding { scroll-snap-type: none; scroll-behavior: auto; }

.carousel-cell,
.carousel-ghost {
  flex: none;
  width: clamp(14rem, 68vw, 18.5rem);
  scroll-snap-align: center;
  /* The depth the turn happens in. Shallow enough that the card's near edge only bulges about a
     tenth of its width mid-rotation, which is what the track's padding has to absorb; any deeper
     and the flip reads as a theme-park gate swinging open. */
  perspective: 1400px;
}

/* ---- The card: one element, two faces, every transform ----
   The press, the centre stage and the turn all compose here, because two `transform` declarations
   on one element cancel each other - the same reasoning the stage scale already followed, moved up
   a level now that there is a second face to carry with it.

   Ungated on purpose: with no JavaScript this is a plain block wrapper and the two faces simply
   stack, which is the page a no-JS visitor gets. */
.carousel-flip { position: relative; }

.carousel.is-live .carousel-flip {
  transform-style: preserve-3d;
  transform: scale(calc(var(--can-stage, 1) * var(--can-press, 1))) rotateY(var(--can-turn, 0deg));
  transform-origin: 50% 100%;             /* every card stands on the same line, whatever its size */
  transition: transform .42s var(--settle, cubic-bezier(.22, .61, .36, 1));
}
.carousel.is-live .carousel-flip[data-flipped] { --can-turn: 180deg; }
/* Feedback on the press, never on the release - read from the card because that is where the
   transform now lives, and :active on a child cannot set a custom property its parent reads. */
.carousel.is-live .carousel-flip:has(.carousel-can:active) {
  --can-press: .985;
  transition-duration: .1s;
}

/* ---- One drink ---- */
.carousel-can {
  display: grid;
  gap: .75rem;
  justify-items: center;
  width: 100%;
  min-height: 44px;                       /* the floor for a tap target; the art makes it far taller */
  padding: 1.1rem 1rem 1.25rem;
  /* .55 is exactly 3.00:1 against the card's own navy-lift -> navy-deep panel, which is WCAG
     1.4.11's floor for a non-text control boundary. At .26 it measured 1.64:1 and this border is
     the only thing that says a card is a control at rest - hover (.5) was already 4.03:1 and the
     centre card (.45) 3.51:1, so the resting state was the one state below the line. */
  border: 1px solid rgba(192, 168, 128, .55);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--navy-lift, #1E3254), var(--navy-deep, #0B1726));
  color: var(--cream, #F5EBD2);
  font: inherit;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .24s var(--settle, cubic-bezier(.22, .61, .36, 1)),
              opacity .32s var(--settle, cubic-bezier(.22, .61, .36, 1));
}
.carousel-can:hover { border-color: rgba(240, 224, 184, .5); }
/* Declared here rather than left to site.css: this file has to stand up on its own, and a focus
   ring is not something to inherit by luck. */
.carousel-can:focus-visible,
.carousel-back:focus-visible { outline: 2px solid var(--gold-hi, #F0E0B8); outline-offset: 3px; }
/* Read from the cell, not the button: a repeat of the open can has to carry the same lit edge. */
.carousel-cell[data-open] .carousel-can,
.carousel-ghost[data-open] .carousel-can { border-color: rgba(240, 224, 184, .72); }

.carousel-art { display: block; width: 100%; }
.carousel-art > * { display: block; width: 100%; height: auto; margin: 0 auto; }

.carousel-name {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 900;
  font-size: 1.3rem;
  line-height: 1.15;
  letter-spacing: -.01em;                 /* tracking tightens as the type grows */
  color: var(--cream, #F5EBD2);
}

/* Gold is metal, so the numerals take a lit gradient rather than a flat swatch - but NOT
   --gold-grad. That ramp ends at #806840, which is 3.4:1 on this panel: below the 4.5:1 floor for
   text this small, on the darkest third of every numeral. This ramp keeps the light source and
   stops at #C0A880, which is 7.9:1. */
.carousel-pos {
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.4;
  letter-spacing: .26em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold-hi, #F0E0B8), #D8C49A 50%, var(--gold, #C0A880));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- The centre stage ----
   The can under the midpoint is the subject: it stands forward of the row, and the rest sit back.
   Transform only - no width, no margin - so the strip's geometry never changes under the scroll
   that is reading it, and the enlarged can paints over its neighbours instead of shoving them.

   Gated on .is-live because nothing sets data-centre without JavaScript, and a band of cans all
   quietly shrunk to 94% with no one ever promoted would be a worse page than one with no stage at
   all.

   The scale is set on the card and the dimming on the face, which looks like a split worth
   tidying and is not: `opacity` below 1 flattens an element's `preserve-3d`, so dimming the card
   would cost the turn its third dimension. The face dims, the card turns. */
.carousel.is-live .carousel-flip { --can-stage: .94; }
.carousel.is-live .carousel-can { opacity: .82; }
.carousel.is-live [data-centre] { position: relative; z-index: 1; }
.carousel.is-live [data-centre] .carousel-flip { --can-stage: 1.06; }
.carousel.is-live [data-centre] .carousel-can {
  opacity: 1;
  border-color: rgba(240, 224, 184, .45);
}

/* ---- The back face ----
   The same node that used to open as a panel below the band. It is laid over the front face, in
   the same box, so the card never grows and the track never clips it: the whole reason the panel
   below was 280px of mostly empty engraved ground is that it had a band's width to fill and six
   lines to fill it with. Here it has a card.

   Everything below is gated on .is-live. With no JavaScript nothing can turn, so the details stay
   a plain readable block beneath their own can - the page a no-JS visitor has always got. */
.carousel-details-in { min-height: 0; }

.carousel.is-live .carousel-details {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  /* The front face's padding, to the pixel - except at the top, where the way back hangs over the
     corner. That control needs a 44px tap target for a 12px label, and 44px of grid row for it
     left Watermelon Lime's facts with 6px to spare; out of the flow it costs the 1.35rem below
     instead, and the tap target is unchanged. */
  padding: 2.45rem 1rem 1.25rem;
  border: 1px solid rgba(240, 224, 184, .42);
  border-radius: 4px;
  background:
    /* The engraved sunburst from the seal, turned down until it is a ground rather than a pattern,
       over the card's own navy. */
    radial-gradient(120% 90% at 50% 0%, rgba(240, 224, 184, .07), transparent 60%),
    repeating-conic-gradient(from 250deg at 50% 0%, rgba(192, 168, 128, .07) 0 .6deg, transparent .6deg 7.5deg),
    linear-gradient(180deg, var(--navy-lift, #1E3254), var(--navy-deep, #0B1726));
  color: var(--cream, #F5EBD2);
  text-align: left;
  /* The safety net, and only that: the tallest back face measures 363px inside a 436px card at
     320px wide. It is here for a visitor who has asked for much larger text, where scrolling a
     card is better than losing the bottom of it. */
  overflow: auto;
  transform: rotateY(180deg);
}
/* The face turned away is not drawn and is not clickable. Two mechanisms rather than one because
   they answer different questions: backface-visibility decides what is painted, pointer-events
   decides what a tap finds - and a tap must never land on the face nobody can see. */
.carousel.is-live .carousel-can,
.carousel.is-live .carousel-details { backface-visibility: hidden; }
.carousel.is-live .carousel-flip:not([data-flipped]) .carousel-details { pointer-events: none; }
.carousel.is-live .carousel-flip[data-flipped] .carousel-can { pointer-events: none; }

/* The slack sits above and below the facts rather than under them: the complaint this change
   answers was blank space, and space a reader reads as margin is not blank. */
.carousel.is-live .carousel-details-in { align-self: center; }

/* The way back off a turned card. Small, quiet, the top left corner - a card's reverse, not a
   dialog. First in the DOM as well as first on the card, so tabbing off it goes INTO the facts
   and out the far side rather than straight out of the band. */
.carousel-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;                       /* the tap-target floor, as the can has */
  padding: 0 .4rem;
  border: 0;
  background: none;
  color: var(--gold-hi, #F0E0B8);
  font-family: "EB Garamond", Georgia, serif;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.carousel-back::before { content: "\2190\00a0\00a0"; }   /* the direction, not decoration */
.carousel-back:hover { color: var(--cream, #F5EBD2); }
/* Out of the flow only once there is a card to hang it on; see the padding note above. */
.carousel.is-live .carousel-back { position: absolute; top: .3rem; left: .6rem; }

/* ---- Less motion: the band lands instead of travelling, the panel appears instead of growing ----
   The centre stage keeps its emphasis. What goes is the journey between the two states: a can
   arrives at its larger size rather than growing into it. */
@media (prefers-reduced-motion: reduce) {
  .carousel-track { scroll-behavior: auto; }   /* carousel.js also passes behavior:'instant' here */
  .carousel-can { transition: none; }
  /* Nothing rotates. The card stays flat and the two faces cross-fade, which is the same
     disclosure arriving without the journey - and the back face is as reachable as ever, because
     what reveals it is still `hidden` coming off and `data-flipped` going on. */
  .carousel.is-live .carousel-flip {
    transform-style: flat;
    transition: none;
  }
  .carousel.is-live .carousel-flip[data-flipped] { --can-turn: 0deg; }
  /* The press is still answered, it just stops being a movement: the edge lights instead. */
  .carousel.is-live .carousel-flip:has(.carousel-can:active) { --can-press: 1; }
  .carousel-can:active { border-color: rgba(240, 224, 184, .72); }
  .carousel.is-live .carousel-details {
    transform: none;
    backface-visibility: visible;
    opacity: 0;
    transition: opacity .2s linear;
  }
  .carousel.is-live .carousel-flip[data-flipped] .carousel-details { opacity: 1; }
  /* With nothing turned away, the front face has to be taken off the card itself. */
  .carousel.is-live .carousel-flip[data-flipped] .carousel-can { opacity: 0; }
}

/* ---- Less transparency: the hairlines and the engraved ground go solid ---- */
@media (prefers-reduced-transparency: reduce) {
  .carousel-can { border-color: #6F6246; background: var(--navy-deep, #0B1726); }
  .carousel-can:hover,
  .carousel-cell[data-open] .carousel-can,
  .carousel-ghost[data-open] .carousel-can { border-color: var(--gold-hi, #F0E0B8); }
  /* The back face is a card, not a film over one: the engraved ground goes and the navy goes
     solid, so the facts are read off a surface rather than through one. */
  .carousel.is-live .carousel-details {
    border-color: #6F6246;
    background: var(--navy-deep, #0B1726);
  }
}

/* ---- More contrast: a defined edge on every control, and no relying on a tint ----
   The cans off the midpoint keep full opacity here. Dimming is a legible way to say "not the
   subject" at normal contrast and the wrong way to say it to someone who asked for more, so the
   stage falls back to size and edge weight alone. */
@media (prefers-contrast: more), (forced-colors: active) {
  .carousel-can { border-color: currentColor; background: var(--navy-deep, #0B1726); }
  .carousel.is-live .carousel-can { opacity: 1; }
  .carousel-cell[data-open] .carousel-can,
  .carousel-ghost[data-open] .carousel-can { border-width: 2px; }
  .carousel.is-live [data-centre] .carousel-can { border-color: currentColor; border-width: 2px; }
  .carousel-pos {
    background: none; -webkit-background-clip: border-box; background-clip: border-box;
    color: var(--cream, #F5EBD2);
  }
  .carousel.is-live .carousel-details {
    border-color: currentColor;
    border-width: 2px;
    background: var(--navy-deep, #0B1726);
  }
  .carousel-back { color: var(--cream, #F5EBD2); text-decoration: underline; }
}

/* ---- Print: the band is a list, not a strip, and the scenery is not a drink ---- */
@media print {
  .carousel-track { display: block; overflow: visible; padding: 0; }
  .carousel-cell { width: auto; }
  .carousel-can { border-color: #999; background: none; color: #000; }
  .carousel.is-live .carousel-can { opacity: 1; }
  .carousel.is-live .carousel-flip { --can-stage: 1; transform: none; transform-style: flat; }
  .carousel-pos { background: none; color: #555; }
  /* On paper a card has one side, so both faces print, stacked, and every drink's facts are
     there - not only the one that happened to be turned when the page was sent. The closed ones
     are `hidden`, which is why this rule has to say so. */
  .carousel.is-live .carousel-details,
  .carousel.is-live .carousel-details[hidden] {
    display: block;
    position: static;
    inset: auto;
    overflow: visible;
    transform: none;
    opacity: 1;
    border: 0;
    border-top: 1px solid #999;
    border-radius: 0;
    background: none;
    color: #000;
    padding: .6rem 0 0;
  }
  /* `.is-live` in the selector because the way back only exists when JavaScript made a face turn
     away, and because a rule that takes content off the page has to say so - see the no-JS test. */
  .carousel.is-live .carousel-back { display: none; }
  /* A repeat of a can is there to make a strip endless. On paper there is no strip, and printing
     the same drink three times would read as three drinks. Gated on .is-live because that is the
     only state in which a repeat exists at all. */
  .carousel.is-live .carousel-ghost { display: none; }
}