/* ==========================================================================
   Tina Smith Music — brand tokens & component stylesheet
   Source: Tina Smith Music Brand Guide (designer PDF dated 2022-05-26,
   distilled at ~/Documents/Claude/KINSMITH_OS/06-CLIENTS/TINA_SMITH_MUSIC/BRAND_GUIDE.md,
   intaken 2026-09-28) + extracted/generalized from the live site's
   :root block and components at ~/Projects/tina-smith-site/index.html.
   Extracted into this standalone stylesheet: 2026-09-26.

   Variable names are KEPT from the site's own token names for component
   compatibility (--lime, --violet, etc.) even though they map to guide
   color NAMES that don't literally say "lime" or "violet":
     --lime   = Xanthic (#dee408) — guide SECONDARY color, used here as the
                STRUCTURAL accent (labels, rules, borders, `//` markers).
     --violet = Rose (#ff2f83) — guide PRIMARY color, used here as the
                TRIGGER/CTA color (primary buttons, key emphasis).
   This Rose=trigger / Xanthic=structure mapping is this site's own applied
   convention, not stated verbatim in the guide — the guide says both are
   "logos, backgrounds, single-word accents." Keep the mapping when reusing
   this file so buttons/labels/markers stay visually consistent across Tina
   properties.

   Load this file wholesale into any new HTML artifact for Tina Smith Music
   rather than re-deriving hex values from memory.
   ========================================================================== */

:root{
  /* Tina Smith Music brand guide (2022-05-26): Xanthic structure, Rose trigger,
     Russian-Violet-tinted dark surfaces. Guide: KINSMITH_OS/06-CLIENTS/TINA_SMITH_MUSIC */
  --lime:#DEE408;          /* Xanthic — guide secondary; structural accent here (labels, rules, `//` markers) */
  --violet:#FF2F83;        /* Rose — guide primary; carries every CTA / primary button */
  --violet-deep:#E02371;   /* Rose hover state (darkened, not a guide-named swatch) */
  --salmon:#FF8EA2;        /* Salmon Pink — guide tertiary; used for script pull-quotes */
  --black:#150B1B;         /* near-black tinted toward Russian Violet #432355; primary bg */
  --coal:#1E1129;          /* secondary bg (panels, strip, video cards) */
  --charcoal:#2B1A3A;      /* borders / offset-shadow color */
  --cream:#FAF8F4;         /* primary text (site-derived near-white, not a guide swatch) */
  --muted:#CFC5DA;         /* secondary text */
  --faded:#93879F;         /* footer / metadata text */
}

/* ==========================================================================
   Base
   ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--cream);font:16px/1.65 Inter,-apple-system,sans-serif}

/* faint lime grid overlay — signature background texture */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;
  background-image:linear-gradient(var(--lime) 1px,transparent 1px),linear-gradient(90deg,var(--lime) 1px,transparent 1px);
  background-size:56px 56px}

a{color:var(--lime);text-decoration:none}
img,iframe{max-width:100%}

/* ==========================================================================
   Header / wordmark / nav
   ========================================================================== */
header{position:sticky;top:0;z-index:10;background:rgba(14,17,10,.94);backdrop-filter:blur(4px);
  border-bottom:2px solid var(--lime);display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 5vw;gap:1rem;flex-wrap:wrap}

/* Wordmark rule: guide says White or Black ONLY — never rose/xanthic on the
   wordmark itself. The lime bars below are framing, not wordmark color. */
.wordmark{font-family:'Archivo Black',sans-serif;font-size:1.5rem;letter-spacing:.14em;transform:skew(-4deg);
  border-left:5px solid var(--lime);border-right:5px solid var(--lime);padding:0 .6rem;color:var(--cream)}
.wordmark b{color:var(--cream);font-weight:400}

nav{display:flex;gap:1.4rem}
nav a{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:.82rem;color:var(--muted)}
nav a:hover{color:var(--lime)}

/* ==========================================================================
   Sections / labels (the `//` marker)
   ========================================================================== */
section{padding:4.5rem 5vw;position:relative;max-width:1100px;margin:0 auto}

.label{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;
  color:var(--lime);margin-bottom:1rem}
.label::before{content:"// "}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{padding:6.5rem 5vw 5rem;max-width:none;
  background:linear-gradient(180deg,rgba(21,11,27,.55) 0%,rgba(21,11,27,.82) 60%,var(--black) 100%),
  url('/assets/bg-violet.jpg') center top/cover no-repeat}
.hero>*{max-width:1100px;margin-left:auto;margin-right:auto}
.hero h1{font-family:'Archivo Black',sans-serif;font-size:clamp(2.3rem,7vw,4.5rem);line-height:1.05;
  text-transform:uppercase;letter-spacing:.01em}
.hero h1 span{color:var(--lime)}
.hero p{max-width:34rem;margin:1.4rem 0 2.2rem;color:var(--muted);font-size:1.06rem}

/* ==========================================================================
   Buttons — Rose (violet var) is the trigger/CTA, filled; ghost is lime-outlined
   ========================================================================== */
.btnrow{display:flex;gap:1rem;flex-wrap:wrap}

.btn{display:inline-block;font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.9rem;padding:.85rem 1.7rem;border:2px solid var(--violet);color:var(--black);
  background:var(--violet);box-shadow:6px 6px 0 var(--charcoal);transition:transform .12s,box-shadow .12s;font-weight:600}
.btn:hover{background:var(--violet-deep);border-color:var(--violet-deep);transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--charcoal);color:var(--black)}

.btn.ghost{background:transparent;color:var(--lime);border-color:var(--lime)}
.btn.ghost:hover{background:var(--lime);color:var(--black)}

/* ==========================================================================
   Scrolling tag strip
   ========================================================================== */
.strip{border-top:2px solid var(--lime);border-bottom:2px solid var(--lime);background:var(--coal);
  overflow:hidden;white-space:nowrap;padding:.7rem 0;max-width:none}
.strip span{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.86rem;
  color:var(--cream);display:inline-block;animation:scroll 28s linear infinite}
.strip b{color:var(--lime);font-weight:500;margin:0 .8rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ==========================================================================
   Panel — dark card with lime left-rail + offset lime-tinted shadow
   ========================================================================== */
.panel{background:var(--coal);border:1px solid var(--charcoal);border-left:5px solid var(--lime);
  padding:1.6rem;box-shadow:8px 8px 0 rgba(200,245,66,.08)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

/* ==========================================================================
   Lists — releases pattern (reusable `//` bulleted rows with trailing meta)
   ========================================================================== */
.releases li{list-style:none;display:flex;justify-content:space-between;gap:1rem;
  padding:.55rem 0;border-bottom:1px solid var(--charcoal);font-size:.98rem}
.releases li::before{content:"// ";color:var(--lime);font-family:Oswald,sans-serif}
.releases li span:first-child{flex:1}
.releases .yr{color:var(--faded);font-family:Oswald,sans-serif;letter-spacing:.1em}

/* ==========================================================================
   Video / media cards — lime top-rail
   ========================================================================== */
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.6rem}
.vid{border:1px solid var(--charcoal);border-top:4px solid var(--lime);background:var(--coal)}
.vid iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.vid p{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:.82rem;
  padding:.7rem .9rem;color:var(--muted)}

/* ==========================================================================
   Story / pull-quote — Caveat script flourish, rose (violet var) left rule
   ========================================================================== */
.story p{max-width:44rem;color:var(--muted);margin-bottom:1rem}
.story .pull{font-family:Caveat,cursive;font-size:clamp(1.9rem,4.5vw,2.7rem);color:var(--salmon);
  line-height:1.25;border-left:5px solid var(--violet);padding-left:1rem;margin:1.8rem 0;max-width:44rem}
.fans{font-family:Oswald,sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.9rem;color:var(--cream)}
.fans b{color:var(--lime);font-weight:500}

/* photo treatment: lime top-rail border + rose-tinted offset shadow */
.story img{border:1px solid var(--charcoal);border-top:4px solid var(--lime);
  box-shadow:8px 8px 0 rgba(255,47,131,.25)}

/* ==========================================================================
   Banner / footer — lime rule, uppercase Oswald metadata
   ========================================================================== */
footer{border-top:2px solid var(--lime);padding:1.4rem 5vw;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;color:var(--faded);font-size:.82rem;font-family:Oswald,sans-serif;
  letter-spacing:.12em;text-transform:uppercase}