/* ==========================================================================
   CSW VENTURES LLC — BRAND SYSTEM
   Values sampled directly from the logo artwork.
   Import this before any page stylesheet.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Jost:wght@200;300;400;500&family=Fraunces:opsz,wght@9..144,500;9..144,700&display=swap");

:root{
  /* ---- Paper -------------------------------------------------------- */
  --csw-ivory:        #FBF6F0;   /* primary background */
  --csw-ivory-warm:   #F5EDE4;   /* alternating bands, card fills */
  --csw-white:        #FFFFFF;

  /* ---- Ink ---------------------------------------------------------- */
  --csw-ink:          #111111;   /* letterforms, headings */
  --csw-ink-soft:     #3B3733;   /* body copy */
  --csw-muted:        #8A7F73;   /* captions, meta */

  /* ---- Gold (metallic gradient, sampled dark → mid → light) ---------- */
  --csw-gold-dark:    #A07D45;
  --csw-gold:         #B38C52;   /* the one true gold */
  --csw-gold-light:   #D7B072;
  --csw-gold-metal:   linear-gradient(112deg,
                        var(--csw-gold-dark) 0%,
                        var(--csw-gold-light) 42%,
                        var(--csw-gold) 68%,
                        var(--csw-gold-dark) 100%);

  /* ---- Lines -------------------------------------------------------- */
  --csw-rule:         rgba(179,140,82,.34);
  --csw-rule-faint:   rgba(179,140,82,.16);
  --csw-hairline:     rgba(17,17,17,.10);

  /* ---- Type --------------------------------------------------------- */
  --csw-display:      "Bodoni Moda","Didot","Bodoni MT",Georgia,serif;
  --csw-sans:         "Jost","Futura","Century Gothic",
                      -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  /* The wide tracking in the wordmark is the brand's loudest signal.
     These three steps cover every use of it. */
  --csw-track-wide:   .34em;   /* CSW VENTURES LLC lockup */
  --csw-track-mid:    .18em;   /* eyebrows, nav, labels */
  --csw-track-tight:  .06em;   /* buttons, meta */

  --csw-gutter:       clamp(20px,5vw,64px);
}

/* ==========================================================================
   BRAND PRIMITIVES
   ========================================================================== */

/* Metallic gold text — matches the gradient on the S and the slashes. */
.b-gold{
  background:var(--csw-gold-metal);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
@supports not (background-clip:text){
  .b-gold{color:var(--csw-gold);background:none}
}

/* The slash. The signature device of the identity — C / S / W.
   Used anywhere two things sit in relation to each other. */
.b-slash{
  display:inline-block;
  color:var(--csw-gold);
  font-family:var(--csw-display);
  font-weight:400;
  transform:skewX(-12deg);
  margin:0 .5em;
  user-select:none;
}

/* Wordmark lockup, set in type rather than an image so it stays crisp
   at masthead size. */
.b-wordmark{
  font-family:var(--csw-display);
  font-weight:500;
  letter-spacing:.04em;
  color:var(--csw-ink);
  line-height:1;
  white-space:nowrap;
}
.b-wordmark .sep{
  color:var(--csw-gold);
  display:inline-block;
  transform:skewX(-12deg);
  margin:0 .16em;
  font-weight:400;
}

/* Wide-tracked caps, the sans half of the identity. */
.b-caps{
  font-family:var(--csw-sans);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:var(--csw-track-wide);
}
.b-eyebrow{
  font-family:var(--csw-sans);
  font-weight:400;
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:var(--csw-track-mid);
  color:var(--csw-muted);
}

/* Hairline rules flanking centerd text — lifted straight from the
   "— CSW VENTURES LLC —" lockup. */
.b-flanked{
  display:flex;align-items:center;gap:18px;
  font-family:var(--csw-sans);font-weight:300;
  text-transform:uppercase;letter-spacing:var(--csw-track-mid);
  font-size:.72rem;color:var(--csw-ink-soft);
}
.b-flanked::before,.b-flanked::after{
  content:"";flex:1;height:1px;background:var(--csw-rule);
}
.b-flanked--left::before{display:none}

/* Ambient diagonal hairlines from the letterhead treatments. */
.b-etching{position:relative;overflow:hidden}
.b-etching::before,.b-etching::after{
  content:"";position:absolute;width:1px;height:190%;
  background:var(--csw-rule-faint);pointer-events:none;
}
.b-etching::before{top:-45%;left:8%;transform:rotate(24deg)}
.b-etching::after{top:-45%;right:14%;transform:rotate(-24deg)}

/* Button */
.b-btn{
  display:inline-block;
  font-family:var(--csw-sans);font-weight:400;font-size:.78rem;
  text-transform:uppercase;letter-spacing:var(--csw-track-mid);
  color:var(--csw-ink);text-decoration:none;
  padding:15px 34px;
  border:1px solid var(--csw-gold);
  background:transparent;
  transition:background .25s ease,color .25s ease;
}
.b-btn:hover{background:var(--csw-gold);color:var(--csw-ivory);text-decoration:none}
.b-btn:focus-visible{outline:2px solid var(--csw-ink);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ==========================================================================
   SUB-BRAND: POURME
   A subsidiary keeps its own identity. These tokens are scoped to .pm-scope
   so they can never bleed into CSW styles — see the --pm- prefix.
   ========================================================================== */

.pm-scope{
  --pm-oak:      #1B1310;
  --pm-oak-deep: #261B14;
  --pm-amber:    #E8A33D;
  --pm-cream:    #F5EDDF;
  --pm-muted:    rgba(245,237,223,.70);
  --pm-line:     rgba(245,237,223,.14);
  --pm-display:  "Fraunces", Georgia, serif;

  background:var(--pm-oak);
  color:var(--pm-cream);
  font-family:var(--csw-sans);
}

/* PourMe's wordmark, exactly as it appears on its own site. */
.pm-mark{
  font-family:var(--pm-display);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--pm-cream);
  line-height:1;
}
.pm-mark span{color:var(--pm-amber)}

.pm-btn{
  display:inline-block;
  font-family:var(--csw-sans);font-weight:400;font-size:.78rem;
  text-transform:uppercase;letter-spacing:var(--csw-track-mid);
  color:var(--pm-oak);background:var(--pm-amber);
  text-decoration:none;padding:15px 34px;
  transition:opacity .2s ease;
}
.pm-btn:hover{opacity:.88;text-decoration:none;color:var(--pm-oak)}
.pm-btn:focus-visible{outline:2px solid var(--pm-amber);outline-offset:3px}