/* ══════════════════════════════════════════════════════════════════
   CIRCLE & STAR — CHROME & EDITIONS KIT  (cs-chrome.css)
   Companion to cs-components.css · v2 · 2026

   PURELY ADDITIVE. cs-components.css already ships .cs-lockup,
   .cs-nav (+ --split / --ruled / --stacked), .cs-nav__link/menu/cta.
   This file only adds what that kit lacked, and never redefines an
   existing rule — it extends:
     • .cs-lockup__wr / __cs   — size the two marks composed in a lockup
     • .cs-nav__back           — microsite (*.live) tie-back
     • spotlight + wipe        — nav rollovers (theatre lighting)
     • .cs-foot                — shared footer (the letter)
     • .cs-edition             — numbered edition lockup (STRAND Nº.N / NAME)
     • .cs-notes-mark          — REELNOTES / SLEEVENOTES / FIELDNOTES wordmark
     • .cs-notes accents       — sienna / wine / pine (accent only)
     • .cs-lift                — card rollover

   Load AFTER cs-components.css. Double-scoped to .cs, !important on
   load-bearing lines so a hostile host can't override from outside.
   Marks are <svg>/<img> using currentColor — the parent sets colour.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════
   A. NOTES SEASON ACCENTS  (muted on purpose — they sit UNDER gold,
   never competing with the brighter live strands)
   ══════════════════════════════════════════════════════════════════ */
.cs {
  --cs-reel:   #b96a43;  /* sienna  — film & screen   */
  --cs-sleeve: #9c5566;  /* wine    — records & music */
  --cs-field:  #5f8470;  /* pine    — writing & ideas */
  /* lifted tints for type ON ink (the base hues read muddy as text) */
  --cs-reel-lit:   #cb7d51;
  --cs-sleeve-lit: #c1818f;
  --cs-field-lit:  #86ad97;
}


/* ══════════════════════════════════════════════════════════════════
   B. LOCKUP PARTS — compose WR wordmark · divider · C&S emblem
   The kit sizes a single anchor SVG to 64/88px; when the lockup is
   composed from two marks, size each part here. These selectors
   (.cs .cs-lockup svg.cs-lockup__*) tie the kit's split rule on
   specificity and win on load order, so they hold inside the nav too.
   ══════════════════════════════════════════════════════════════════ */
.cs .cs-lockup svg.cs-lockup__wr,
.cs .cs-lockup .cs-lockup__wr {
  height: 0.95rem !important;
  width: auto !important;
  color: var(--cs-text) !important;
  opacity: 0.82;
}
.cs .cs-lockup svg.cs-lockup__cs,
.cs .cs-lockup .cs-lockup__cs {
  height: 1.5rem !important;
  width: auto !important;
  color: var(--cs-gold) !important;
}
/* rollover 3 — "the mark catches the light" */
.cs .cs-lockup--hover,
.cs a .cs-lockup {
  transition: transform 0.45s cubic-bezier(.22,.61,.36,1), filter 0.45s ease !important;
}
.cs a:hover .cs-lockup,
.cs .cs-lockup--hover:hover {
  transform: scale(1.05) !important;
  filter: drop-shadow(0 0 16px rgba(200,169,110,0.45)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .cs a:hover .cs-lockup,
  .cs .cs-lockup--hover:hover { transform: none !important; filter: none !important; }
}


/* ══════════════════════════════════════════════════════════════════
   C. NAV ROLLOVERS + microsite tie-back  (extends the kit's .cs-nav)
   ══════════════════════════════════════════════════════════════════ */
/* rollover 1 — SPOTLIGHT: hovering the menu dims the room… */
.cs .cs-nav__menu:hover .cs-nav__link { color: var(--cs-faint) !important; opacity: 0.5; }
/* …the hovered link steps back into the light */
.cs .cs-nav__menu .cs-nav__link:hover { color: var(--cs-text) !important; opacity: 1; }

/* rollover 2 — UNDERLINE-WIPE from the left (added to the kit's link) */
.cs .cs-nav__link {
  background-image: linear-gradient(var(--cs-gold), var(--cs-gold)) !important;
  background-repeat: no-repeat !important;
  background-position: left bottom !important;
  background-size: 0 1px !important;
  transition: color 0.35s ease, opacity 0.35s ease,
              background-size 0.4s cubic-bezier(.22,.61,.36,1) !important;
}
.cs .cs-nav__link:hover,
.cs .cs-nav__link[aria-current="page"] { background-size: 100% 1px !important; }

@media (prefers-reduced-motion: reduce) {
  .cs .cs-nav__link { transition: color 0.2s ease !important; }
}

/* microsite tie-back — replaces the left menu on *.live */
.cs .cs-nav__back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--cs-gold) !important;
  text-decoration: none !important;
}
.cs .cs-nav__back::before { content: "←" !important; font-size: 0.9rem !important; }


/* ══════════════════════════════════════════════════════════════════
   D. SHARED FOOTER — .cs-foot  (a letter, not a sitemap)
   ══════════════════════════════════════════════════════════════════ */
.cs.cs-foot,
.cs .cs-foot {
  padding: 3.5rem 2.5rem 1.5rem !important;
  background:
    radial-gradient(ellipse 60% 100% at 50% 0%, var(--cs-gold-dim), transparent 62%) !important;
  border-top: 1px solid var(--cs-rule) !important;
}
.cs .cs-foot > .cs-lockup { display: flex !important; justify-content: center !important; }
.cs .cs-foot__beat {
  text-align: center !important;
  margin: 1.1rem 0 2rem !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: rgba(200,169,110,0.62) !important;
}
.cs .cs-foot__cols {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr 1fr !important;
  gap: 2rem !important;
  max-width: 920px !important;
  margin: 0 auto !important;
  padding-top: 1.8rem !important;
  border-top: 1px solid var(--cs-rule) !important;
}
.cs .cs-foot__col-label {
  display: block !important;
  font-size: 0.5rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--cs-gold) !important;
  opacity: 0.8;
  margin-bottom: 0.7rem !important;
}
.cs .cs-foot__col { font-size: 0.8rem !important; line-height: 1.9 !important; color: var(--cs-muted) !important; }
.cs .cs-foot__col a { color: var(--cs-muted) !important; text-decoration: none !important; }
.cs .cs-foot__col a:hover { color: var(--cs-text) !important; }
.cs .cs-foot__base {
  max-width: 920px !important;
  margin: 1.6rem auto 0 !important;
  padding-top: 1.1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  color: var(--cs-faint) !important;
}
@media (max-width: 720px) {
  .cs .cs-foot__cols { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
}


/* ══════════════════════════════════════════════════════════════════
   E. EDITION LOCKUP — .cs-edition  (STRAND Nº.N / NAME)
   Solid emblem badge · nav-mark + date / title. Numbers count up per
   strand or season; the Nº.N is ALWAYS house gold.
   ══════════════════════════════════════════════════════════════════ */
.cs .cs-edition {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.95rem !important;
}
.cs .cs-edition__badge {
  width: 2.6rem !important;
  height: 2.6rem !important;
  flex: none !important;
  display: block !important;
  color: var(--cs-gold) !important;
}
/* the badge SVG: filled solid, star + inner circle KNOCKED OUT */
.cs .cs-edition__badge svg { width: 100% !important; height: 100% !important; display: block !important; }
.cs .cs-edition__badge svg path { fill: currentColor !important; fill-rule: evenodd !important; }
.cs .cs-edition__meta {
  display: flex !important;
  align-items: center !important;
  gap: 0.85rem !important;
  margin-bottom: 0.5rem !important;
  font-size: 0.55rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.32em !important;
  text-transform: uppercase !important;
  color: var(--cs-muted) !important;
}
.cs .cs-edition__navmark { width: 3.4rem !important; height: auto !important; display: block !important; color: var(--cs-text) !important; opacity: 0.55; }
.cs .cs-edition__title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cs-text) !important;
  line-height: 1.1 !important;
}
.cs .cs-edition__no  { color: var(--cs-gold) !important; }   /* the number is always gold */
.cs .cs-edition__div { color: var(--cs-faint) !important; margin: 0 0.15em !important; }  /* the " / " before a name */


/* ══════════════════════════════════════════════════════════════════
   F. NOTES WORDMARK — .cs-notes-mark
   The gold thread lives INSIDE the wordmark: NOTES is always gold;
   only the prefix carries the format accent.
   ══════════════════════════════════════════════════════════════════ */
.cs .cs-notes-mark {
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.cs .cs-notes-mark__notes { color: var(--cs-gold) !important; }
.cs .cs-notes-mark--reel   .cs-notes-mark__pre { color: var(--cs-reel-lit) !important; }
.cs .cs-notes-mark--sleeve .cs-notes-mark__pre { color: var(--cs-sleeve-lit) !important; }
.cs .cs-notes-mark--field  .cs-notes-mark__pre { color: var(--cs-field-lit) !important; }

/* season accent helpers — accent ONLY (eyebrow, rule, chip, ribbon) */
.cs .cs-accent-reel   { color: var(--cs-reel-lit) !important; }
.cs .cs-accent-sleeve { color: var(--cs-sleeve-lit) !important; }
.cs .cs-accent-field  { color: var(--cs-field-lit) !important; }
.cs .cs-ribbon-reel   { border-left: 4px solid var(--cs-reel) !important;   padding-left: 1rem !important; }
.cs .cs-ribbon-sleeve { border-left: 4px solid var(--cs-sleeve) !important; padding-left: 1rem !important; }
.cs .cs-ribbon-field  { border-left: 4px solid var(--cs-field) !important;  padding-left: 1rem !important; }


/* ══════════════════════════════════════════════════════════════════
   G. LIFT — rollover 4. Cards rise toward the light, border warms.
   Add .cs-lift to any card/anchor. No layout shift; motion-safe.
   ══════════════════════════════════════════════════════════════════ */
.cs .cs-lift {
  transition: transform 0.28s cubic-bezier(.22,.61,.36,1),
              border-color 0.28s ease, box-shadow 0.28s ease !important;
}
.cs .cs-lift:hover {
  transform: translateY(-3px) !important;
  border-color: var(--cs-gold-soft) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.4) !important;
}
@media (prefers-reduced-motion: reduce) {
  .cs .cs-lift { transition: border-color 0.2s ease !important; }
  .cs .cs-lift:hover { transform: none !important; }
}