/* BE CHILLS — WEBSITE TYPOGRAPHY SYSTEM
   Phase 1: real, responsive CSS text and approved PNG wordmark.
   Phase 2: replace variable --bc-display-font and --bc-reading-font with
   separately designed/approved custom font families once their actual files exist.
   IMPORTANT: This file is NOT an installable font and does not recreate all
   letterforms of the artist's approved wordmark. Never claim otherwise.
   Scoped styles: do not globally restyle body text.
*/
:root {
  --bc-violet: #ae86fb;
  --bc-violet-bright: #e4c6ff;
  --bc-lavender: #f5ddff;
  --bc-pale-blue: #cee8ff;
  --bc-metallic-shadow: #654c92;
  --bc-ink: #f2e9ff;
  --bc-display-font: "BeChillsDisplay", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --bc-reading-font: "BeChillsReading", "Palatino Linotype", Georgia, serif;
  --bc-font-size-hero: clamp(2.5rem, 8vw, 5.6rem);
  --bc-font-size-heading: clamp(1.8rem, 4.4vw, 3.1rem);
  --bc-font-size-nav: clamp(0.85rem, 2.1vw, 1.3rem);
}

/* True typography uses selectable, indexable characters. The glow and
   pearlescent colors echo the approved logo; they're not a replacement for
   the actual custom-drawn alphabet. */
.bc-type, .bc-display, .bc-statement, .bc-nav-type, .bc-section-title {
  font-family: var(--bc-display-font);
  font-weight: 700;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
}
.bc-display, .bc-section-title, .bc-statement {
  background-image: linear-gradient(115deg,
    #fffdfd 3%, #ffdbf9 15%, #bcbcff 29%, #ffffff 44%,
    #d3a7fc 57%, #d1eaff 74%, #fbe4ff 87%, #b991e5 100%);
  color: var(--bc-ink);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 1px #482762) drop-shadow(0 2px 7px #6a3da975);
}
.bc-display { font-size: var(--bc-font-size-hero); line-height: 1.08; letter-spacing: -.018em; }
.bc-section-title { font-size: var(--bc-font-size-heading); line-height: 1.19; letter-spacing: .005em; }
.bc-statement { font-size: clamp(1.3rem, 3.1vw, 2.3rem); line-height: 1.26; letter-spacing: .008em; }
.bc-nav-type { color: var(--bc-violet-bright); font-size: var(--bc-font-size-nav); line-height: 1.3; letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 10px #a06cff80; }
.bc-nav-type:hover, .bc-nav-type:focus-visible { color: #fff; text-shadow: 0 0 12px #bfa4ff; }
.bc-reading-accent { font-family: var(--bc-reading-font); color: var(--bc-ink); font-weight: 600; }

/* Approved image stays the exact brand name mark (not a substitute font). */
.bc-wordmark { display: block; width: min(100%, 44rem); height: auto; object-fit: contain; }

/* Nav eye asset is an actual eye image chosen by the site, not an emoji. */
.bc-eye-divider { display: inline-block; flex: 0 0 auto; width: clamp(1.15rem, 2.8vw, 1.95rem); height: clamp(1.15rem, 2.8vw, 1.95rem); object-fit: contain; vertical-align: middle; filter: drop-shadow(0 0 5px #9a69edbb); pointer-events: none; }
.bc-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(.35rem, 1.4vw, .85rem); }
.bc-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.bc-nav a:focus-visible { outline: 2px solid var(--bc-violet-bright); outline-offset: 4px; border-radius: 3px; }

/* Real text overlays preserve original artwork file and accessibility. */
.bc-art-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 5vw, 4rem); text-align: center; pointer-events: none; }
.bc-art-overlay .bc-statement { max-width: 26ch; filter: drop-shadow(0 2px 4px #150c2b) drop-shadow(0 2px 12px #150c2bcc); }

@media (max-width: 430px) {
  .bc-nav { gap: .33rem; }
  .bc-nav-type { font-size: .83rem; letter-spacing: .02em; }
  .bc-eye-divider { width: 1rem; height: 1rem; }
  .bc-statement { line-height: 1.24; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-type, .bc-display, .bc-statement, .bc-nav-type { animation: none !important; transition-duration: .01ms !important; }
}
/* To install the ACTUAL custom fonts later (only after verified files exist):
@font-face {
  font-family: "BeChillsDisplay";
  src: url("assets/fonts/BeChillsDisplay.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "BeChillsReading";
  src: url("assets/fonts/BeChillsReading.woff2") format("woff2");
  font-display: swap;
}
*/

/* Existing-site integration. Provisional companion only; final approved font files still needed.
   Preserve body copy, lyrics, form fields, original media and historical layout. */
h1.bc-display{font-family:var(--bc-display-font);font-size:var(--bc-font-size-hero);line-height:1.08;letter-spacing:-.018em}
h2.bc-section-title{font-family:var(--bc-display-font);font-size:var(--bc-font-size-heading);line-height:1.19;letter-spacing:.005em}
h3.bc-statement{font-family:var(--bc-display-font);font-size:clamp(1.3rem,3.1vw,2.3rem);line-height:1.26;letter-spacing:.008em}
.merch .statement.bc-section-title{font-family:var(--bc-display-font);font-size:var(--bc-font-size-heading);line-height:1.19;letter-spacing:.005em}
.album-feature .bc-featured-label{font-size:clamp(.85rem,1.6vw,1.1rem);letter-spacing:.1em;line-height:1.3}
.bc-nav .bc-nav-type{font-family:var(--bc-display-font);font-size:var(--bc-font-size-nav);line-height:1.3;letter-spacing:.07em}
.bc-nav .bc-eye-divider{width:clamp(1.15rem,2.8vw,1.95rem);height:clamp(1.15rem,2.8vw,1.95rem);object-fit:contain}
.bc-nav{flex-wrap:nowrap;gap:clamp(.35rem,1.4vw,.85rem)}
.art-banner span.bc-statement{font-family:var(--bc-display-font);font-size:clamp(1.3rem,3.1vw,2.3rem);line-height:1.26}
.affirmation-stage figcaption.bc-statement{font-family:var(--bc-display-font);font-size:clamp(1.3rem,3.1vw,2.3rem);line-height:1.26;user-select:text;pointer-events:auto}
a.button.bc-reading-accent{font-family:var(--bc-reading-font)}
@media(max-width:430px){.bc-nav{gap:.33rem}.bc-nav .bc-nav-type{font-size:.83rem;letter-spacing:.02em}.bc-nav .bc-eye-divider{width:1rem;height:1rem}}
@media(forced-colors:active){.bc-display,.bc-section-title,.bc-statement{background:none;-webkit-text-fill-color:currentColor;color:CanvasText;filter:none}}

/* Be Chills original custom font build 0.100 — IN PROGRESS.
   Native COLR/CPAL color glyphs. Editable sources: assets/fonts/source/.
   Review /font-specimen.html before final approval. */
@font-face {
  font-family: "BeChillsDisplay";
  src: url("fonts/BeChillsSignature-InProgress.woff2?v=0.110") format("woff2"),
       url("fonts/BeChillsSignature-InProgress.woff?v=0.110") format("woff"),
       url("fonts/BeChillsSignature-InProgress.ttf?v=0.110") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "BeChillsReading";
  src: url("fonts/BeChillsCompanion-InProgress.woff2?v=0.110") format("woff2"),
       url("fonts/BeChillsCompanion-InProgress.woff?v=0.110") format("woff"),
       url("fonts/BeChillsCompanion-InProgress.ttf?v=0.110") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Preserve native glyph colors instead of masking them with a CSS gradient. */
.bc-type, .bc-display, .bc-statement, .bc-nav-type, .bc-section-title,
.bc-reading-accent, .art-banner span.bc-statement,
.affirmation-stage figcaption.bc-statement {
  background-image: none;
  -webkit-text-fill-color: initial;
  color: var(--bc-ink);
  filter: none;
  text-shadow: none;
  font-weight: 400;
  font-synthesis: none;
  font-kerning: normal;
}
.bc-type, .bc-reading-accent, .bc-nav .bc-nav-type,
a.button.bc-reading-accent {
  font-family: var(--bc-reading-font);
}
h1.bc-display { line-height: 1.22; }
h2.bc-section-title, h3.bc-statement { line-height: 1.35; }
.bc-nav .bc-nav-type { line-height: 1.4; }
@media (forced-colors: active) {
  .bc-display, .bc-section-title, .bc-statement, .bc-nav-type {
    color: CanvasText;
    -webkit-text-fill-color: currentColor;
  }
}