/* ============================================================
   Wine Regions Club, brand lockup
   ------------------------------------------------------------
   One canonical way to draw the brand, used on every page.

   The "Wine Regions" half is the original supplied artwork, never
   re-typeset, so the wordmark stays exactly on brand. Only the word
   "Club" is live text, set in Cormorant italic and sat on the
   artwork's own baseline.

   Two tones, because the mark has to survive both a dark hero photo
   and a cream page:
     data-tone="dark"   background is dark   white wordmark  + gold Club
     data-tone="light"  background is light  black wordmark  + plum Club
   Flip the attribute (see nav in home/index.html) and both halves
   change together.
   ============================================================ */

@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:500 600;font-display:swap;
  src:url("/console/card/assets/f9b80bae-3cbe-4c12-aef6-6c6d5992ad0f.woff2") format('woff2');
}

.wr-brand{
  --wr-h:34px;                 /* height of the lockup artwork; the only knob */
  --wr-club-light:#6b1838;     /* plum, for light backgrounds */
  --wr-club-dark:#d9b566;      /* gold, for dark backgrounds  */

  display:inline-block;
  white-space:nowrap;
  line-height:1;
  text-decoration:none;
  color:inherit;
}

/* The artwork's baseline sits 65.89% down from its top edge (measured off
   the source PNG), so pulling the bottom margin up by the remaining 34.11%
   makes the image's inline baseline coincide with the wordmark's baseline.
   "Club" then aligns to it in any font, at any size, with no magic numbers. */
.wr-brand__lockup{
  height:var(--wr-h);
  width:auto;
  vertical-align:baseline;
  margin-bottom:calc(var(--wr-h) * -0.3411);
}

/* The suffix slot. Usually "Club", but the same slot carries "Partners",
   "Admin" or "Scanner" on the staff-facing surfaces, so every property of the
   business reads as one family. */
.wr-brand__club,.wr-brand__suffix{
  font-family:'Cormorant Garamond',Cormorant,Garamond,Georgia,serif;
  font-style:italic;
  font-weight:600;
  font-size:calc(var(--wr-h) * 0.72);
  margin-left:calc(var(--wr-h) * 0.16);
  letter-spacing:.004em;
}

/* ---- tone switching -------------------------------------------------- */
/* Both lockups ship in the markup; CSS picks one. No JS needed to render,
   and no flash of the wrong colour while a script boots. */
.wr-brand__lockup{display:none}
.wr-brand[data-tone="light"] .wr-brand__lockup[data-on="light"]{display:inline}
.wr-brand[data-tone="dark"]  .wr-brand__lockup[data-on="dark"] {display:inline}

.wr-brand[data-tone="light"] .wr-brand__club,
.wr-brand[data-tone="light"] .wr-brand__suffix{color:var(--wr-club-light)}
.wr-brand[data-tone="dark"] .wr-brand__club,
.wr-brand[data-tone="dark"] .wr-brand__suffix{color:var(--wr-club-dark)}

/* Sitting over photography rather than flat colour: lift both halves off
   the image so neither can wash out against a bright patch. */
.wr-brand--photo[data-tone="dark"] .wr-brand__club,
.wr-brand--photo[data-tone="dark"] .wr-brand__suffix{text-shadow:0 1px 14px rgba(0,0,0,.5)}
.wr-brand--photo[data-tone="dark"] .wr-brand__lockup{filter:drop-shadow(0 1px 10px rgba(0,0,0,.4))}

/* Crossfade when a page flips tone mid-scroll. */
.wr-brand__club,.wr-brand__suffix{transition:color .35s cubic-bezier(.16,1,.3,1)}

/* ---- stacked variant, for narrow sidebars and app headers ------------ */
.wr-brand--stack{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px}
.wr-brand--stack .wr-brand__lockup{margin-bottom:0}
.wr-brand--stack .wr-brand__club,.wr-brand--stack .wr-brand__suffix{margin-left:0;font-size:calc(var(--wr-h) * 0.62);line-height:1}

@media (prefers-reduced-motion:reduce){
  .wr-brand__club,.wr-brand__suffix{transition:none}
}