/* ============================================================
   Signature 4 — Component primitives styling.
   All values reference design-system tokens. These classes back the
   React primitives in /components (Button, Badge, Eyebrow, ArrowLink,
   Placeholder, Ticker, Section, Reveal) and are shipped to consumers
   via styles.css so the components render correctly anywhere.
   ============================================================ */

/* ---- Base type helpers ------------------------------------------ */
.k-eyebrow { font-family: var(--font-sans); font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin: 0 0 var(--space-5); color: var(--text-secondary); }
.k-display { font-family: var(--font-sans); font-size: var(--fs-display); font-weight: var(--fw-regular); line-height: var(--lh-tight);
  letter-spacing: var(--ls-display); margin: 0; }
.k-h2 { font-family: var(--font-sans); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading); margin: 0; }
.k-h3 { font-family: var(--font-sans); font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading); margin: 0; }
.k-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: var(--lh-normal); color: var(--text-secondary); margin: 0; }
.k-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-secondary); }
.k-marker { background: var(--signal); color: var(--text-on-signal); padding: 0.02em 0.2em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---- Buttons ---------------------------------------------------- */
.k-btn { font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: -0.01em; line-height: 1;
  border-radius: var(--radius-pill); border: var(--border-cta) solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.5rem; transition: var(--transition); text-decoration: none; white-space: nowrap; }
.k-btn-sm { padding: 0.5rem 1.1rem; font-size: 0.875rem; }
.k-btn-md { padding: 0.75rem 1.6rem; font-size: 1rem; }
.k-btn-lg { padding: 1rem 2.1rem; font-size: 1.0625rem; }
.k-btn-primary { background: var(--signal); color: var(--text-on-signal); }
.k-btn-primary:hover { background: var(--signal-bright); transform: translateY(-1px); }
.k-btn-primary:active { background: var(--signal-deep); transform: translateY(0); }
.k-btn-ghost { background: transparent; color: var(--signal); border-color: var(--signal); }
.k-btn-ghost:hover { background: rgba(233,224,55,0.1); }
.k-btn-dark { background: var(--ink-800); color: #fff; border-color: var(--stroke-on-dark); }
.k-btn-dark:hover { background: var(--ink-700); }
.k-btn-ar { color: var(--signal); }
.k-btn-primary .k-btn-ar { color: inherit; }
.k-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---- ArrowLink -------------------------------------------------- */
.k-alink { font-family: var(--font-sans); font-weight: var(--fw-medium); letter-spacing: -0.01em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.4em; transition: var(--transition); white-space: nowrap; }
.k-alink-light { color: var(--text-primary); }
.k-alink-signal { color: var(--signal); }
.k-alink-md { font-size: 1.0625rem; } .k-alink-sm { font-size: 0.9375rem; } .k-alink-lg { font-size: 1.375rem; }
.k-ar { color: var(--signal); font-size: 0.9em; transition: transform var(--dur-base) var(--ease-out); }
.k-alink:hover .k-ar { transform: translate(3px,-3px); }

/* ---- Badge ------------------------------------------------------ */
.k-badge { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-sans); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: 0.04em; line-height: 1; padding: 0.4rem 0.85rem; border-radius: var(--radius-pill); border: 1px solid transparent; }
.k-badge-solid { background: var(--signal); color: var(--text-on-signal); }
.k-badge-outline { background: transparent; color: var(--signal); border-color: var(--signal); }
.k-badge-quiet { background: var(--ink-800); color: var(--text-secondary); border-color: var(--stroke-on-dark); }

/* ---- Placeholder (striped stand-in for real photography) -------- */
.k-ph { position: relative; overflow: hidden; background:
    repeating-linear-gradient(135deg, #262626 0 14px, #1e1e1e 14px 28px); }
.k-ph-light { background: repeating-linear-gradient(135deg, #dedcd2 0 14px, #e7e5db 14px 28px); }
.k-ph-metal { background:
    linear-gradient(115deg, #1a1a1a 0%, #4a4a4d 38%, #6c6c70 50%, #3a3a3c 64%, #141414 100%); }
.k-ph-label { position: absolute; top: 12px; left: 14px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; letter-spacing: 0.04em; color: var(--text-muted); }
.k-ph-light .k-ph-label { color: var(--text-ink-muted); }

/* ---- Section shell ---------------------------------------------- */
.k-section { position: relative; }
.k-bg-page { background: var(--ink-pure); color: var(--text-primary); }
.k-bg-surface { background: var(--ink-850); color: var(--text-primary); }
.k-bg-heritage { background: var(--paper-warm); color: var(--text-ink); }
.k-bg-heritage em { color: var(--text-ink); }
.k-pad-lg { padding-top: var(--section-y-lg); padding-bottom: var(--section-y-lg); }
.k-pad-md { padding-top: var(--section-y); padding-bottom: var(--section-y); }
.k-pad-sm { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.k-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); width: 100%; }
.k-section em { font-style: italic; color: var(--text-primary); }

/* ---- Reveal animation ------------------------------------------- */
/* A subtle rise that NEVER hides content. We animate transform only
   (not opacity), so even if the animation is frozen (background tab /
   print), content stays fully visible. */
.k-reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .k-reveal.is-in { animation: k-rise 0.6s var(--ease-out) both; }
}
@keyframes k-rise { from { transform: translateY(18px); } to { transform: none; } }

/* ---- Ticker ----------------------------------------------------- */
.k-ticker { overflow: hidden; border-top: 1px solid var(--stroke-on-dark-2); border-bottom: 1px solid var(--stroke-on-dark-2);
  padding: 0.95rem 0; white-space: nowrap; background: var(--ink-pure); }
.k-ticker-track { display: inline-flex; align-items: center; gap: 1.4rem; animation: k-tick linear infinite; }
.k-ti { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: var(--fw-medium); letter-spacing: var(--ls-ticker); text-transform: uppercase; color: var(--signal); }
.k-bu { color: var(--signal); opacity: 0.45; }
@keyframes k-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .k-ticker-track { animation: none; } }