/* ==========================================================================
   Make Your Own Cocktail
   Dressed to the 2026 branding guide: cream ground, letterpress display type,
   hard offset shadows, stamp accents. Everything that can move, moves — but
   only in response to something the visitor did.
   ========================================================================== */

.mixer {
  position: relative;
  --mixer-line: color-mix(in srgb, var(--brown) 18%, transparent);
  --display: clamp(2.4rem, 9vw, 9rem);
}

.mixer__head { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mixer__eyebrow { margin: 0 0 .05em; }
.mixer__display { margin: 0; }
.mixer__intro {
  margin: clamp(.75rem, 2vw, 1.5rem) auto 0;
  max-width: 62ch;
  color: var(--brown);
}

/* --------------------------------------------------------------- shelf */

.mixer__shelf { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.mixer__shelf-title,
.mixer__build-title,
.mixer-card__h {
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.35vw, 1.35rem);
  color: var(--maroon);
  margin: 0 0 .8em;
  letter-spacing: .02em;
}

.mixer__recipes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: clamp(.5rem, 1vw, .9rem);
}

.mixer__recipe {
  position: relative;
  display: grid; gap: .25rem;
  padding: .95rem 1rem 1rem;
  text-align: left;
  cursor: pointer;
  background: var(--cream-warm);
  border: 2px solid var(--mixer-line);
  color: var(--brown);
  box-shadow: 4px 4px 0 transparent;
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out),
              background-color .22s var(--ease-out), border-color .22s var(--ease-out);
}
/* Staggered entrance that does NOT gate visibility: the resting state is
   visible, so if animations are paused or suppressed the tiles are still
   there. (An earlier version used the shared .reveal class, which is applied
   by an observer that only sweeps the DOM once at load — these tiles are
   built afterwards, so they stayed at opacity 0.) */
@media (prefers-reduced-motion: no-preference) {
  .mixer__recipe {
    animation: mixerTileIn .42s var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * .045s);
  }
}
@keyframes mixerTileIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.mixer__recipe:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--tan);
  border-color: var(--brown);
}
.mixer__recipe[aria-pressed="true"] {
  background: var(--maroon);
  border-color: var(--maroon);
  color: var(--cream);
  box-shadow: 5px 5px 0 var(--brown-shadow);
  transform: translate(-2px, -2px);
}
.mixer__recipe-name {
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: clamp(.9rem, 1.1vw, 1.1rem);
  line-height: 1;
}
.mixer__recipe-meta {
  font-size: .78rem;
  font-weight: 600;
  opacity: .78;
}
.mixer__recipe-meta em { font-style: normal; opacity: .7; }
.mixer__recipe[aria-pressed="true"] .mixer__recipe-meta { color: var(--tan); opacity: 1; }

/* ---------------------------------------------------------------- grid */

.mixer__grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.85fr) minmax(300px, 1.5fr) minmax(260px, 1.1fr);
  gap: clamp(1rem, 2.2vw, 2.25rem);
  align-items: start;
}

/* ------------------------------------------------------------- the glass */

.mixer__glass-col { display: grid; justify-items: center; gap: 1rem; position: sticky; top: 6rem; }
.mixer__glass {
  position: relative;
  width: 100%; max-width: 280px;
  color: var(--brown);
}
.mixer__glass-svg {
  width: 100%; height: auto; overflow: visible;
  /* On the SVG only — on the wrapper it also shadowed the caption. */
  filter: drop-shadow(7px 9px 0 color-mix(in srgb, var(--tan) 72%, transparent));
}
.mixer__glass-label {
  display: block; text-align: center;
  margin-top: .4rem;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: .8rem; letter-spacing: .12em;
  color: color-mix(in srgb, var(--brown) 62%, transparent);
}
.mixer__equiv {
  margin: 0; text-align: center;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: clamp(.82rem, 1.05vw, 1rem);
  line-height: 1.25;
  color: var(--maroon);
  max-width: 22ch;
}

/* ------------------------------------------------------------- ingredients */

.mixer__build {
  background: var(--cream-warm);
  border: 2px solid var(--mixer-line);
  padding: clamp(1rem, 1.8vw, 1.6rem);
  box-shadow: 6px 6px 0 var(--tan);
}
.mixer__build-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.mixer__build-title { margin-bottom: .8em; }
.mixer__reset {
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700;
  font-size: .82rem;
  color: var(--brown); opacity: .6;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 0;
}
.mixer__reset:hover { opacity: 1; color: var(--red); }

.mixer__rows { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .55rem; }

.mixer__row {
  display: grid;
  grid-template-columns: 14px 1fr auto 22px;
  align-items: center;
  gap: .6rem;
  padding: .5rem .2rem;
  border-bottom: 1px solid var(--mixer-line);
}
@media (prefers-reduced-motion: no-preference) {
  .mixer__row { animation: mixerRowIn .34s var(--ease-out); }
}
@keyframes mixerRowIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.mixer__row-swatch {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--swatch, var(--tan));
  box-shadow: inset 0 0 0 1px rgb(87 34 0 / .28);
}
.mixer__row-name {
  font-weight: 600; font-size: .92rem; color: var(--brown);
  line-height: 1.2;
}
.mixer__row-name em {
  font-style: normal; font-size: .78em;
  color: color-mix(in srgb, var(--brown) 55%, transparent);
}
.mixer__row-ctrl { display: flex; align-items: center; gap: .35rem; }

.mixer__step {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 2px solid var(--brown);
  background: var(--cream);
  color: var(--brown);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: background-color .15s, color .15s, transform .12s;
}
.mixer__step:hover { background: var(--brown); color: var(--cream); }
.mixer__step:active { transform: scale(.9); }

.mixer__amt {
  width: clamp(70px, 8vw, 120px);
  accent-color: var(--red);
  cursor: pointer;
}
.mixer__oz {
  min-width: 4.4em; text-align: right;
  font-family: var(--font-header);
  font-size: .82rem; color: var(--maroon);
}
.mixer__remove {
  width: 22px; height: 22px;
  background: none; border: 0; cursor: pointer;
  color: color-mix(in srgb, var(--brown) 45%, transparent);
  font-size: 1.15rem; line-height: 1; padding: 0;
}
.mixer__remove:hover { color: var(--red); }
.mixer__empty {
  padding: 1.2rem .2rem; text-align: center;
  color: color-mix(in srgb, var(--brown) 55%, transparent);
  font-size: .9rem;
}

.mixer__select {
  width: 100%;
  padding: .7em .9em;
  font-family: var(--font-body); font-size: .92rem; font-weight: 600;
  color: var(--brown);
  background: var(--cream);
  border: 2px dashed var(--mixer-line);
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.mixer__select:hover { border-color: var(--brown); background: #fff; }

/* ------------------------------------------------------------------ stats */

.mixer__stats {
  background: var(--brown);
  color: var(--cream);
  padding: clamp(1.1rem, 2vw, 1.8rem);
  box-shadow: 6px 6px 0 var(--brown-shadow);
  display: grid; gap: .85rem;
}
.mixer__stat { display: grid; gap: .1rem; }
.mixer__stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 3.4rem);
  line-height: .85;
  color: var(--orange);
}
.mixer__stat-value i { font-style: normal; font-size: .42em; margin-left: .06em; }
.mixer__stat-label {
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: .68rem; letter-spacing: .1em;
  color: var(--tan);
}
.mixer__stat--hero .mixer__stat-value { font-size: clamp(3.4rem, 6.4vw, 6.4rem); }
.mixer__stat--hero .mixer__stat-label { font-size: .78rem; }

.mixer__meter {
  position: relative;
  height: 14px;
  background: color-mix(in srgb, var(--cream) 22%, transparent);
  overflow: visible;
}
/* The 50% mark is one standard drink, so "a beer" reads as the midpoint. */
/* The tick at the halfway point is "one regular beer" — the number the beer
   industry's own tool reports — so the scale has a reference the visitor can
   check us against. */
.mixer__meter::after {
  content: "";
  position: absolute; left: 50%; top: -5px; bottom: -5px;
  width: 3px; margin-left: -1px;
  background: var(--cream);
}
.mixer__meter-mark {
  display: block;
  margin-top: .3rem;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: .6rem; letter-spacing: .1em;
  color: var(--tan);
  text-align: center;
}
/* The fill is always the full track carrying a white-to-red ramp, and is
   clipped back to the current reading. Sizing the element instead would squash
   the gradient into whatever width it had, so the tip would read red at every
   value; anchoring it to the track means the colour is a property of WHERE you
   are on the scale, which is the whole point of the meter. */
.mixer__meter-fill {
  display: block;
  position: absolute; inset: 0; width: 100%;
  z-index: 1;
  background: linear-gradient(90deg,
    var(--cream) 0%,
    var(--amber) 55%,
    var(--red) 100%);
  clip-path: inset(0 calc(100% - var(--pct, 0%)) 0 0);
  transition: clip-path .5s var(--ease-out);
}
/* Carries "Serves N people" from 1.5 standard drinks, so it is sized to be
   read rather than to sit as fine print (client, 2026-09-14; was .82rem). */
.mixer__meter-note {
  margin: -.3rem 0 0;
  font-size: 1.05rem; line-height: 1.35;
  color: var(--cream);
  min-height: 2.7em;
}

.mixer__stat-row {
  /* Two stats since Calories came out (2026-08-25). auto-fit rather than a
     hard count so it does not need touching again if one is added back. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: .6rem;
  padding-top: .5rem;
  border-top: 1px solid color-mix(in srgb, var(--cream) 22%, transparent);
}
.mixer__actions { margin-top: .3rem; }
.mixer__actions .btn { width: 100%; text-align: center; }
.mixer__fine {
  margin: 0; font-size: .72rem; line-height: 1.5;
  color: var(--tan); opacity: .85;
}
.mixer__fine strong { color: var(--cream); }
/* ------------------------------------------------------------ recipe card */

.mixer-card-panel { width: min(100%, 760px); }

.mixer-card {
  background: var(--cream);
  color: var(--brown);
  padding: clamp(1.5rem, 3vw, 2.75rem) clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
}
.mixer-card__rule {
  height: 8px;
  background-image: radial-gradient(circle, var(--tan) 2.6px, transparent 2.8px);
  background-size: 22px 8px;
  background-repeat: repeat-x;
  margin: 0 auto;
  width: 78%;
}
.mixer-card__title {
  color: var(--maroon);
  font-size: clamp(2.2rem, 5.4vw, 3.9rem);
  line-height: .88;
  margin: clamp(1rem, 2vw, 1.6rem) 0 .3rem;
}
.mixer-card__serves {
  margin: 0 0 clamp(1rem, 2.4vw, 1.9rem);
  font-size: .92rem;
  color: color-mix(in srgb, var(--brown) 78%, transparent);
}
.mixer-card__cols {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1rem, 3vw, 2.4rem);
  text-align: left;
}
.mixer-card__h { color: var(--maroon); margin-bottom: .6em; }
.mixer-card__list { list-style: none; margin: 0; padding: 0; }
.mixer-card__list li {
  padding: .4rem 0;
  border-bottom: 1px solid var(--mixer-line);
  font-size: .92rem;
}
.mixer-card__list li::before { content: "· "; color: var(--tan); font-weight: 700; }
.mixer-card__list--stats li::before { content: none; }
.mixer-card__list--stats b {
  font-family: var(--font-display);
  font-size: 1.5em; color: var(--red);
  margin-right: .35em; line-height: 1;
}
.mixer-card__h--prep { margin-top: clamp(1.2rem, 2.4vw, 2rem); text-align: left; }
.mixer-card__method {
  margin: 0; text-align: left;
  font-size: .95rem; line-height: 1.6;
}
.mixer-card__foot {
  margin-top: clamp(1.2rem, 2.6vw, 2rem);
  display: grid; gap: .25rem;
  padding-bottom: clamp(.8rem, 2vw, 1.4rem);
}
.mixer-card__brand {
  font-family: var(--font-header);
  text-transform: uppercase;
  color: var(--maroon);
  font-size: 1.05rem;
}
.mixer-card__brand i {
  font-family: var(--font-script); font-style: normal;
  text-transform: uppercase; color: var(--tan);
  font-size: 1.35em; line-height: 0; vertical-align: -.05em;
}
.mixer-card__note { font-size: .74rem; opacity: .72; }

.mixer-card__actions {
  display: flex; gap: .75rem; flex-wrap: wrap;
  justify-content: center;
  padding: clamp(.9rem, 2vw, 1.25rem) clamp(.9rem, 2vw, 1.25rem) 0;
  background: var(--brown-deep);
}

/* Social row, on the same dark plinth as the buttons above it. */
.mixer-card__share {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: .55rem;
  padding: .9rem clamp(.9rem, 2vw, 1.25rem) clamp(.9rem, 2vw, 1.25rem);
  background: var(--brown-deep);
}
.mixer-card__share-label {
  font-family: var(--font-header);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .74rem;
  color: var(--tan);
  margin-right: .15rem;
}
.mixer-card__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem;
  padding: 0; border: 0; cursor: pointer;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 14%, transparent);
  color: var(--cream);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out),
              transform .2s var(--ease-out);
}
/* The share-sheet button ships hidden and is revealed only where the browser
   can actually share a file. `display: inline-flex` above would otherwise beat
   the UA's [hidden] rule and the button would show everywhere. */
.mixer-card__social[hidden] { display: none; }
/* The only button that carries the card image itself, so it leads. */
.mixer-card__social--card { background: var(--orange); color: var(--brown); }
.mixer-card__social svg { width: 1.15rem; height: 1.15rem; }
.mixer-card__social:hover, .mixer-card__social:focus-visible {
  background: var(--orange);
  color: var(--brown);
  transform: translateY(-2px);
}
.mixer-card__social:active { transform: translateY(0); }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .mixer__grid { grid-template-columns: 1fr 1fr; }
  .mixer__glass-col { position: static; grid-column: 1 / -1; }
  .mixer__glass { max-width: 170px; }
}

@media (max-width: 760px) {
  .mixer__grid { grid-template-columns: 1fr; }
  .mixer__recipes { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
  .mixer__row { grid-template-columns: 12px 1fr 20px; row-gap: .35rem; }
  .mixer__row-ctrl { grid-column: 1 / -1; justify-content: space-between; }
  .mixer__amt { flex: 1; width: auto; }
  .mixer-card__cols { grid-template-columns: 1fr; }
  .mixer__stat-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------- printing */

@media print {
  body > *:not(.mixer-card-modal) { display: none !important; }
  .mixer-card-modal, .mixer-card-modal * { visibility: visible; }
  .mixer-card-modal {
    position: static !important; display: block !important; padding: 0 !important;
  }
  .mixer-card-modal .modal__backdrop,
  .mixer-card-modal .modal__close,
  .mixer-card__actions,
  .mixer-card__share { display: none !important; }
  .mixer-card-panel { box-shadow: none !important; width: 100% !important; }
  .mixer-card { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mixer__row { animation: none; }
  .mixer__meter-fill { transition: none; }
  .mixer__recipe { transition: none; }
}

/* --------------------------------------------------------------------------
   Build your own — the second way in.
   The recipe shelf is one route; this is the blank-page route, and it needs to
   look like a peer of the recipe tiles rather than a footnote.
   -------------------------------------------------------------------------- */

.mixer__shelf-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-bottom: .8em;
}
.mixer__shelf-head .mixer__shelf-title { margin-bottom: 0; }

.mixer__scratch {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .5em .95em;
  cursor: pointer;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: clamp(.72rem, .92vw, .92rem);
  letter-spacing: .04em;
  color: var(--brown);
  background: var(--cream);
  border: 2px dashed color-mix(in srgb, var(--brown) 42%, transparent);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
              border-color .18s var(--ease-out), transform .18s var(--ease-out);
}
.mixer__scratch:hover, .mixer__scratch:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  border-style: solid;
  color: var(--brown);
  transform: translateY(-2px);
}
.mixer__scratch-plus {
  font-size: 1.25em; line-height: 0;
  position: relative; top: .04em;
}

/* The drink name is an editable field, not a label. */
.mixer__name {
  flex: 1 1 12ch;
  min-width: 0;
  font-family: var(--font-header);
  text-transform: uppercase;
  font-size: clamp(.95rem, 1.35vw, 1.35rem);
  letter-spacing: .02em;
  color: var(--maroon);
  background: transparent;
  border: 0;
  border-bottom: 2px dashed color-mix(in srgb, var(--brown) 28%, transparent);
  padding: .1em .1em .25em;
  transition: border-color .18s var(--ease-out), background-color .18s var(--ease-out);
}
.mixer__name::placeholder {
  color: color-mix(in srgb, var(--brown) 40%, transparent);
  text-transform: none;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0;
}
.mixer__name:hover { border-bottom-color: var(--brown); }
.mixer__name:focus {
  outline: none;
  border-bottom-color: var(--red);
  background: color-mix(in srgb, var(--cream) 70%, transparent);
}

/* Glass picker */
.mixer__glasses {
  display: flex; gap: .4rem; flex-wrap: wrap;
  margin: 0 0 1rem;
}
.mixer__glass-pick {
  padding: .4em .8em;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .76rem;
  color: var(--brown);
  background: var(--cream);
  border: 2px solid var(--mixer-line);
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out),
              border-color .18s var(--ease-out);
}
.mixer__glass-pick:hover { border-color: var(--brown); }
.mixer__glass-pick[aria-pressed="true"] {
  background: var(--brown);
  border-color: var(--brown);
  color: var(--cream);
}

@media (max-width: 760px) {
  .mixer__shelf-head { gap: .6rem; }
  .mixer__scratch { width: 100%; justify-content: center; }
}