/* ============================================================
   brand.css — single source of truth for the color system.
   primary = derive from client logo.
   Neutral graphite / slate placeholders — the template ships NO
   brand color. Recolor a client by editing ONLY the tokens in the
   first :root block below; everything else references these.
   Recolor check (every build): accent-deep vs bg >=4.5:1 ·
   accent-bright vs dark >=4.5:1 · muted vs bg-2 >=4.5:1.
   ============================================================ */
:root {
  /* — Core palette (hex) — CONFIRMED 101 Fitness values (CLAUDE.md brand table).
     Brand gold #A27B44 over warm near-black #14140E. Hardcoded by decision —
     the primary logo file is the flat white mark and cannot be sampled. — */
  --color-primary:      #14140E;  /* near-black — dark hero/sections, footer, nav */
  --color-primary-mid:  #2A2A22;  /* lifted charcoal — hover, borders/dividers on dark */
  --color-accent:       #A27B44;  /* brand GOLD/BRONZE — signature accent, primary CTA */
  --color-accent-deep:  #6E5028;  /* deeper gold — the on-LIGHT accent fallback (7.4:1 vs bg) */
  --color-accent-bright:#C49A62;  /* on-DARK gold — derived tint of confirmed #A27B44 (7.2:1 vs dark; raw gold is 4.8:1 — thin for small text) */
  --color-dark:         #14140E;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #34342A;  /* deepest dark-elevation surface */
  --color-ink:          #14140E;  /* body + heading text */
  --color-muted:        #6B6B63;  /* muted / secondary text — 4.9:1 vs bg-2, 5.4:1 vs bg */
  --color-muted-light:  #9A9488;  /* = silver — secondary text on dark (6.1:1 vs dark) */
  --color-silver:       #9A9488;  /* muted borders, secondary text on dark, chrome */
  --color-line:         #E0DED6;  /* hairlines / borders (warm) */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F6F5F1;  /* light section tint (warm) */
  --color-rating:       #A27B44;  /* star-rating slot — brand gold (no hardcoded stars ship) */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:     20, 20, 14;
  --color-primary-mid-rgb: 42, 42, 34;
  --color-accent-rgb:      162, 123, 68;
  --color-accent-deep-rgb: 110, 80, 40;
  --color-accent-bright-rgb: 196, 154, 98;
  --color-dark-rgb:        20, 20, 14;
  --color-dark-3-rgb:      52, 52, 42;
  --color-ink-rgb:         20, 20, 14;

  /* size the nav off the client logo — see CLAUDE.md logo rules.
     logo-white.png / logo-gold.png are 1500×496 horizontal lockups (~3:1). */
  --nav-height:         96px;   /* nav bar height — starting point, not fixed */
  --nav-logo-height:    64px;   /* ~194px wide at 3:1 — verify in screenshots */
  --footer-logo-height: 80px;   /* ~242px wide — fits the footer brand column */
}

/* ============================================================
   Uniform content-photo container — used for EVERY content photo
   site-wide. One ratio (4:3) so no photo differs in size from
   another. Never use a fixed h-[Npx]. The ONLY exception is
   people/owner portraits: add --portrait (3:4, top-anchored).
   ============================================================ */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-bg-2);
  box-shadow: 0 20px 45px -24px rgba(var(--color-dark-rgb), 0.60),
              0 0 0 1px rgba(var(--color-dark-rgb), 0.06) inset;
}
.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-frame--portrait { aspect-ratio: 3 / 4; }
.photo-frame--portrait > img { object-position: center top; }