/* ============================================================
   Catalina Social Club — HGG sub-brand (rebuilt 2026-05-20)

   ⚠️ MAJOR REVISION: previous assumption "3D-heavy modern membership"
   was WRONG. Brand book at brands/catalina/assets/refs/01-brand-book.pdf
   reveals VINTAGE NAUTICAL SOCIAL CLUB aesthetic (1900-1950s sport/yacht
   club posters), NOT modern 3D.

   Taglines (from brand book):
   - "DRIVEN BY WATER"
   - "SINK THE RULES"
   - "BUILT BY THE OCEAN"

   Inherits HGG family palette (cream + coral-orange primary).
   EXTENDS with Catalina-only secondary palette:
   - Navy deep      #1F3A78  → h:222 s:60% l:30%
   - Cyan azure     #2A78B5  → h:206 s:62% l:44%
   - Mustard yellow #F4C82E  → h:48  s:90% l:57%
   - Oxblood red    #A82828  → h:0   s:62% l:41%
   - Aged cream     #F3EAD3  → h:39  s:60% l:89% (more yellow than HGG cream — paper texture)

   Differentiation:
   - Icon family: C̲s̲C̲ interlocking monogram (Capital C serif + script s inside)
                  + pennant flag + ribbon banner + rope knot wreath
                  + crossed oars + star-in-diamond + swan-rowing
   - Typography: Alfa Slab One (display poster headlines) + Big Shoulders Stencil (ribbon overlays)
                 + Inter (body) + custom SVG monogram (can't replicate in font)
   - Visual signature: VINTAGE PRINT POSTER aesthetic (1904 collegiate / 1929 travel / 1950s racing)
   - Voice: rebellious-yacht-club ("Sink the Rules"), water-driven, irreverent old-money
   - Photography: hand-painted illustration > photo (vintage poster art style)
   - Membership feel: club without exclusivity (anti-fine-dining-stuffiness)

   NO 3D motion. NO Spline/Three.js. Static print-poster look.
   ============================================================ */

@import url("./haogood.brand.css");

.brand-catalina {
  /* ---------- Catalina-only secondary palette (extends HGG base) ---------- */
  --catalina-navy-h: 222;
  --catalina-navy-s: 60%;
  --catalina-navy-l: 30%;
  --catalina-navy: hsl(var(--catalina-navy-h) var(--catalina-navy-s) var(--catalina-navy-l));

  --catalina-cyan-h: 206;
  --catalina-cyan-s: 62%;
  --catalina-cyan-l: 44%;
  --catalina-cyan: hsl(var(--catalina-cyan-h) var(--catalina-cyan-s) var(--catalina-cyan-l));

  --catalina-mustard-h: 48;
  --catalina-mustard-s: 90%;
  --catalina-mustard-l: 57%;
  --catalina-mustard: hsl(var(--catalina-mustard-h) var(--catalina-mustard-s) var(--catalina-mustard-l));

  --catalina-oxblood-h: 0;
  --catalina-oxblood-s: 62%;
  --catalina-oxblood-l: 41%;
  --catalina-oxblood: hsl(var(--catalina-oxblood-h) var(--catalina-oxblood-s) var(--catalina-oxblood-l));

  /* Aged paper cream (slightly more yellow than HGG family cream) */
  --catalina-aged-cream: hsl(39 60% 89%);

  /* ---------- Typography (vintage hand-painted poster feel) ---------- */
  --catalina-display-font: "Alfa Slab One", "Bowlby One SC", "Roboto Slab", Georgia, serif;
  --catalina-stencil-font: "Big Shoulders Stencil Display", "Bebas Neue", Impact, sans-serif;
  --catalina-script-font: "Yellowtail", "Caveat", cursive;  /* for "Catalina" handwritten variants */

  --catalina-display-size-hero: clamp(48px, 7vw, 96px);
  --catalina-display-size-section: clamp(32px, 4vw, 56px);
  --catalina-display-tracking: 0.02em;  /* slight expanded for poster authority */
  --catalina-display-weight: 400;       /* Alfa Slab One only has 400 */

  /* ---------- Density (poster-print, breathing room editorial) ---------- */
  --catalina-section-gap-mobile: 64px;
  --catalina-section-gap-desktop: 120px;
  --catalina-card-padding: 32px;
  --catalina-poster-border: 4px solid;   /* vintage poster borders */

  /* ---------- Motion (RESTRAINED — print posters don't animate) ---------- */
  --catalina-transition: 200ms ease-out;
  /* NO 3D, NO heavy motion. Static print feel. */
}

/* ============================================================
   VINTAGE POSTER DISPLAY HEADLINE
   ============================================================ */

.brand-catalina h1,
.brand-catalina .poster-headline {
  font-family: var(--catalina-display-font);
  font-size: var(--catalina-display-size-hero);
  font-weight: var(--catalina-display-weight);
  letter-spacing: var(--catalina-display-tracking);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--catalina-navy);
}

.brand-catalina h2,
.brand-catalina .poster-section {
  font-family: var(--catalina-display-font);
  font-size: var(--catalina-display-size-section);
  font-weight: var(--catalina-display-weight);
  letter-spacing: var(--catalina-display-tracking);
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--catalina-navy);
}

.brand-catalina .poster-tagline {
  font-family: var(--catalina-stencil-font);
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--catalina-oxblood);
}

/* ============================================================
   VINTAGE POSTER CONTAINER PATTERN
   Cream paper bg + thick navy border + offset shadow (paper feel)
   ============================================================ */

.brand-catalina .poster-frame {
  background: var(--catalina-aged-cream);
  border: var(--catalina-poster-border) var(--catalina-navy);
  padding: 48px 32px;
  position: relative;
  box-shadow:
    8px 8px 0 hsl(var(--catalina-navy-h) var(--catalina-navy-s) calc(var(--catalina-navy-l) - 10%));
}

.brand-catalina .poster-frame--oxblood {
  border-color: var(--catalina-oxblood);
  box-shadow:
    8px 8px 0 hsl(var(--catalina-oxblood-h) var(--catalina-oxblood-s) calc(var(--catalina-oxblood-l) - 10%));
}

.brand-catalina .poster-frame--mustard {
  background: var(--catalina-mustard);
  border-color: var(--catalina-navy);
  color: var(--catalina-navy);
}

/* ============================================================
   PENNANT FLAG (vintage yacht club flag pattern)
   Use cho member tier badge, location chip, status indicator
   ============================================================ */

.brand-catalina .pennant {
  display: inline-flex;
  align-items: center;
  background: var(--catalina-aged-cream);
  color: var(--catalina-oxblood);
  font-family: var(--catalina-stencil-font);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  padding: 6px 16px 6px 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 50%, 100% 100%, 0 100%);
  border: 2px solid var(--catalina-oxblood);
}

.brand-catalina .pennant--navy {
  background: var(--catalina-navy);
  color: var(--catalina-aged-cream);
  border-color: var(--catalina-aged-cream);
}

/* ============================================================
   RIBBON BANNER (vintage award/medal ribbon)
   ============================================================ */

.brand-catalina .ribbon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--catalina-aged-cream);
  color: var(--catalina-oxblood);
  font-family: var(--catalina-display-font);
  font-size: 14px;
  letter-spacing: 0.1em;
  padding: 8px 24px;
  position: relative;
}

.brand-catalina .ribbon::before,
.brand-catalina .ribbon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 100%;
  background: var(--catalina-aged-cream);
  transform: translateY(-50%);
}

.brand-catalina .ribbon::before {
  left: -12px;
  clip-path: polygon(0 0, 100% 0, 70% 50%, 100% 100%, 0 100%);
}

.brand-catalina .ribbon::after {
  right: -12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30% 50%);
}

/* ============================================================
   MONOGRAM SLOT (custom SVG inserted here — C̲s̲C̲ interlocking)
   ============================================================ */

.brand-catalina .monogram-csc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
}

.brand-catalina .monogram-csc svg {
  width: 100%;
  height: 100%;
  fill: var(--catalina-aged-cream);
}

.brand-catalina .monogram-csc--on-cream svg {
  fill: hsl(var(--brand-primary-h) var(--brand-primary-s) var(--brand-primary-l));
}

/* ============================================================
   AGED PAPER TEXTURE (CSS-only approximation, use sparingly)
   For wallpaper-level surface where vintage feel matters
   ============================================================ */

.brand-catalina .aged-paper {
  background:
    radial-gradient(circle at 20% 30%, hsl(39 60% 89% / 0.7), transparent 40%),
    radial-gradient(circle at 80% 70%, hsl(39 60% 85% / 0.5), transparent 50%),
    var(--catalina-aged-cream);
}

/* ============================================================
   TIER CARD (overrides Phase 3 placeholder from old assumption)
   Vintage social-club membership card vibe (NOT modern fintech)
   ============================================================ */

.brand-catalina .tier-card {
  padding: var(--catalina-card-padding);
  background: var(--catalina-aged-cream);
  border: 3px solid var(--catalina-navy);
  border-radius: 0;  /* sharp corners — vintage print, NOT modern rounded */
  font-family: var(--catalina-display-font);
  transition: transform var(--catalina-transition);
}

.brand-catalina .tier-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 6px 6px 0 var(--catalina-navy);
}

.brand-catalina .tier-card--commodore {
  border-color: var(--catalina-oxblood);
  background: var(--catalina-mustard);
}

.brand-catalina .tier-card--commodore:hover {
  box-shadow: 6px 6px 0 var(--catalina-oxblood);
}