/* ═══════════════════════════════════════════════════════════════
   Collectors Network — Design System v3
   Shared across all public pages. Page-specific styles go inline.
   Tokens: aligned with collectors-net.work brand brief
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  /* Brand palette */
  --ink:        #1C1810;
  --ink-soft:   #2C2520;
  --paper:      #F7F3EE;
  --warm:       #EDE7DC;
  --white:      #FFFFFF;
  --soft:       #F7F3EE;

  /* Gold */
  --gold:       #B8863C;
  --gold-lt:    #C99A50;
  --gold-pale:  #DCC08A;
  --gold-faint: #F0E4C8;

  /* Text & UI */
  --muted:      #8C8178;
  --muted-lt:   #A09890;
  --rule:       rgba(28,24,16,0.12);
  --rule-soft:  rgba(28,24,16,0.06);

  /* Status */
  --red:        #8C3B2F;
  --green:      #3B6B4A;

  /* No drop shadows — depth through borders & bg */
  --sh-xs: none;
  --sh-sm: none;
  --sh-md: none;
  --sh-lg: none;
  --sh-xl: none;

  /* Radii — max 2px per brief */
  --r-xs:   2px;
  --r-sm:   2px;
  --r-md:   2px;
  --r-lg:   2px;
  --r-xl:   2px;
  --r-full: 999px;

  /* Typography */
  --font:   'Outfit', sans-serif;
  --serif:  'Outfit', sans-serif;

  /* Transitions — max 0.3s ease */
  --ease:   ease;
  --t-fast: 0.15s ease;
  --t-norm: 0.3s ease;

  /* Header (public pages — dark to match main website) */
  --hdr-h:  64px;
  --hdr-bg: #1C1810;
  --hdr-bd: rgba(184,134,60,0.2);
}

/* ── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color:inherit; text-decoration:none }
button,input,textarea,select { font-family:inherit }
img,video { max-width:100%; display:block }

/* ── Header (public pages — dark) ───────────────────────────── */
.cn-header {
  position: sticky; top:0; z-index:500;
  height: var(--hdr-h);
  background: var(--hdr-bg);
  border-bottom: 1px solid var(--hdr-bd);
  display: flex; align-items:center; justify-content:space-between;
  padding: 0 40px;
  gap: 16px;
}
.cn-brand {
  display: flex; align-items:center; gap:10px;
  text-decoration: none; flex-shrink:0;
}
.cn-brand img {
  height: 28px; width:auto; object-fit:contain;
  display:block; max-width:180px;
}
.cn-brand-text {
  color: #F7F3EE;
  font-family: var(--font);
  font-size: 11px; font-weight:800;
  letter-spacing: 0.25em; text-transform:uppercase;
  white-space: nowrap;
}
.cn-header-nav {
  display: flex; align-items:center; gap:8px;
  flex-shrink: 0;
}

/* Header nav links */
.cn-pill {
  color: rgba(247,243,238,0.65);
  border: 1px solid rgba(247,243,238,0.15);
  border-radius: 2px;
  padding: 8px 16px;
  font-size: 9px; font-weight:700;
  letter-spacing: 0.2em; text-transform:uppercase;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  white-space: nowrap; cursor:pointer; background:transparent;
  text-decoration: none; display:inline-block;
}
.cn-pill:hover {
  background: rgba(247,243,238,0.08);
  color: #F7F3EE;
  border-color: rgba(247,243,238,0.3);
}

/* ── Locale Switcher ────────────────────────────────────────── */
.cn-locale-wrap { position:relative }

.cn-locale-btn {
  display: flex; align-items:center; gap:5px;
  color: rgba(247,243,238,0.65);
  border: 1px solid rgba(247,243,238,0.15);
  border-radius: 2px;
  padding: 8px 13px;
  font-size: 9px; font-weight:700;
  letter-spacing: 0.15em; text-transform:uppercase;
  background: transparent; cursor:pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  white-space: nowrap;
}
.cn-locale-btn:hover,
.cn-locale-btn.open {
  background: rgba(247,243,238,0.08);
  border-color: rgba(247,243,238,0.3);
  color: #F7F3EE;
}
.cn-locale-chevron {
  width:10px; height:10px; opacity:.5;
  transition: transform var(--t-fast);
  flex-shrink:0;
}
.cn-locale-btn.open .cn-locale-chevron { transform:rotate(180deg) }
.cn-locale-sep { opacity:.3; margin:0 2px }

.cn-locale-drop {
  display: none;
  position: absolute; top:calc(100% + 8px); right:0;
  background: #FFFFFF;
  border: 1px solid rgba(28,24,16,0.12);
  border-radius: 2px;
  padding: 16px;
  width: 260px;
  z-index: 600;
  animation: dropIn .15s ease both;
}
.cn-locale-drop.open { display:block }

@keyframes dropIn {
  from { opacity:0; transform:translateY(-4px) }
  to   { opacity:1; transform:none }
}

.cn-locale-section { margin-bottom:12px }
.cn-locale-section:last-child { margin-bottom:0 }
.cn-locale-heading {
  font-size: 9px; font-weight:700; letter-spacing:.3em;
  text-transform: uppercase; color:var(--muted);
  margin-bottom: 8px; padding-bottom:6px;
  border-bottom: 1px solid rgba(28,24,16,0.08);
}
.cn-locale-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px }
.cn-locale-opt {
  display: flex; align-items:center; gap:8px;
  padding: 8px 10px; border-radius: 2px;
  font-size: 13px; font-weight:400;
  cursor: pointer; border:none; background:transparent;
  color: var(--muted); text-align:left;
  transition: background var(--t-fast), color var(--t-fast);
  width: 100%;
}
.cn-locale-opt:hover { background:var(--warm); color:var(--ink) }
.cn-locale-opt.active { background:var(--gold-faint); color:var(--ink); font-weight:600 }
.cn-opt-code {
  font-size: 9px; font-weight:700; letter-spacing:.15em;
  color: var(--muted-lt); width:28px; flex-shrink:0;
}
.cn-locale-opt.active .cn-opt-code { color:var(--gold) }

/* ── Footer ─────────────────────────────────────────────────── */
.cn-footer {
  border-top: 1px solid rgba(28,24,16,0.10);
  background: var(--warm);
  padding: 48px 40px 32px;
}
.cn-footer-grid {
  max-width: 1200px; margin:0 auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3,1fr);
  gap: 48px;
}
.cn-footer-brand img { height:22px; margin-bottom:14px; opacity:.7 }
.cn-footer-brand p {
  font-size: 13px; font-weight:300; color:var(--muted); line-height:1.65;
  max-width: 230px;
}
.cn-footer-col h4 {
  font-size: 9px; font-weight:700; letter-spacing:.3em;
  text-transform: uppercase; color:var(--muted);
  margin-bottom: 14px;
}
.cn-footer-col a {
  display: block;
  font-size: 13px; font-weight:300; color:var(--muted);
  margin-bottom: 10px; line-height:1;
  transition: color var(--t-fast);
}
.cn-footer-col a:hover { color:var(--ink) }
.cn-footer-bar {
  border-top: 1px solid rgba(28,24,16,0.08);
  margin: 32px auto 0; padding-top:20px;
  max-width: 1200px;
  display: flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap:12px;
  font-size: 12px; font-weight:300; color:var(--muted);
}
.cn-footer-bar a { color:var(--gold) }
.cn-footer-bar a:hover { text-decoration:underline }

@media (max-width:860px) {
  .cn-footer-grid { grid-template-columns:1fr 1fr; gap:28px }
  .cn-footer-brand { grid-column:span 2 }
}
@media (max-width:500px) {
  .cn-footer-grid { grid-template-columns:1fr }
  .cn-footer-brand { grid-column:auto }
  .cn-footer { padding:36px 20px 24px }
}

/* ── Layout ─────────────────────────────────────────────────── */
.cn-wrap        { max-width:1180px; margin:0 auto; padding:0 40px }
.cn-wrap--sm    { max-width:780px }
.cn-wrap--wide  { max-width:1400px }

/* ── Buttons ─────────────────────────────────────────────────── */
.cn-btn {
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 2px;
  padding: 14px 32px;
  font-size: 9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
  border: none; text-decoration:none; white-space:nowrap;
  font-family: var(--font);
}
.cn-btn--dark   { background:var(--ink);  color:var(--paper) }
.cn-btn--dark:hover  { background:var(--ink-soft) }
.cn-btn--gold   { background:var(--gold); color:var(--paper) }
.cn-btn--gold:hover  { background:#a0742e }
.cn-btn--outline{ background:transparent; color:var(--ink); border:1px solid rgba(28,24,16,0.2) }
.cn-btn--outline:hover{ background:var(--ink); color:var(--paper) }
.cn-btn--ghost  { background:transparent; color:var(--muted); border:1px solid rgba(28,24,16,0.15) }
.cn-btn--ghost:hover { background:var(--warm); color:var(--ink) }
.cn-btn:disabled { opacity:.45; cursor:not-allowed; pointer-events:none }
.cn-btn--lg { padding:16px 40px; font-size:10px }
.cn-btn--sm { padding:10px 20px; font-size:8px }
.cn-btn--full { width:100%; justify-content:center }

/* Dark section button (light on dark bg) */
.cn-btn--light { background:var(--paper); color:var(--ink); border:none }
.cn-btn--light:hover { background:#fff }

/* ── Cards ───────────────────────────────────────────────────── */
.cn-card {
  background: var(--white);
  border: 1px solid rgba(28,24,16,0.10);
  border-radius: 2px;
  overflow: hidden;
}

/* ── Badge ───────────────────────────────────────────────────── */
.cn-badge {
  display: inline-flex; align-items:center; gap:5px;
  border-radius: 1px;
  padding: 4px 10px;
  font-size: 7px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.cn-badge--dark    { background:var(--ink); color:var(--paper) }
.cn-badge--gold    { background:var(--gold); color:var(--paper) }
.cn-badge--outline { background:transparent; border:1px solid rgba(28,24,16,0.2); color:var(--ink) }
.cn-badge--warm    { background:var(--warm); color:var(--muted); border:1px solid rgba(28,24,16,0.10) }

/* ── Form Fields ─────────────────────────────────────────────── */
.cn-field { margin-bottom:16px }
.cn-field label {
  display: block;
  font-size: 9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color: var(--ink); margin-bottom:8px;
}
.cn-field input,
.cn-field textarea,
.cn-field select {
  width: 100%;
  border: 1px solid rgba(28,24,16,0.15);
  border-radius: 2px;
  background: #fff; color:var(--ink);
  font-size: 13px; font-weight:300;
  padding: 12px 16px;
  outline: none;
  transition: border-color var(--t-fast);
}
.cn-field input::placeholder,
.cn-field textarea::placeholder { color:var(--muted) }
.cn-field input:focus,
.cn-field textarea:focus,
.cn-field select:focus { border-color: var(--gold) }
.cn-field textarea { resize:vertical; min-height:120px; line-height:1.55 }
.cn-field .hint  { font-size:12px; font-weight:300; color:var(--muted); margin-top:6px; line-height:1.45 }
.cn-req { color:var(--red) }

/* ── Toast ───────────────────────────────────────────────────── */
.cn-toast {
  position: fixed; left:50%; bottom:24px;
  transform: translateX(-50%) translateY(80px);
  background: var(--ink); color:var(--paper);
  padding: 12px 24px; border-radius:2px;
  z-index: 9000;
  transition: transform .25s ease;
  font-size: 13px; font-weight:400; text-align:center;
  max-width: 90vw; pointer-events:none;
}
.cn-toast.show { transform:translateX(-50%) translateY(0) }
.cn-toast.err  { background:var(--red) }
.cn-toast.ok   { background:var(--green) }

/* ── Cookie Banner ───────────────────────────────────────────── */
.cn-cookie {
  display: none;
  position: fixed; bottom:0; left:0; right:0;
  z-index: 8000;
  background: var(--ink);
  border-top: 1px solid var(--gold);
  padding: 16px 40px;
  align-items: center; justify-content:space-between;
  gap: 16px; flex-wrap:wrap;
}
.cn-cookie.show { display:flex }
.cn-cookie p {
  font-size: 13px; font-weight:300; color:rgba(247,243,238,0.6);
  line-height: 1.55; flex:1; min-width:220px; margin:0;
}
.cn-cookie p a { color:var(--gold); text-decoration:underline }
.cn-cookie-btns { display:flex; gap:8px; flex-shrink:0 }
.cn-cookie-accept {
  background: var(--gold); border:none; border-radius:2px;
  padding: 10px 24px; font-size:9px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--paper); cursor:pointer; font-family:var(--font);
  transition: background var(--t-fast);
}
.cn-cookie-accept:hover { background:#a0742e }
.cn-cookie-decline {
  background: transparent;
  border: 1px solid rgba(247,243,238,0.2);
  border-radius: 2px;
  padding: 10px 20px; font-size:9px; font-weight:700; letter-spacing:.2em;
  text-transform: uppercase; color:rgba(247,243,238,0.45);
  cursor: pointer; font-family:var(--font);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.cn-cookie-decline:hover {
  border-color: rgba(247,243,238,0.4);
  color: rgba(247,243,238,0.75);
}

/* ── Eyebrow / section label ─────────────────────────────────── */
.cn-eyebrow {
  display: block;
  font-size: 9px; font-weight:700; letter-spacing:0.3em;
  text-transform: uppercase; color:var(--gold);
  margin-bottom: 12px;
}

/* ── Loading dots ────────────────────────────────────────────── */
.cn-loading-dots {
  display: inline-flex; gap:5px; align-items:center;
}
.cn-loading-dots span {
  display: inline-block;
  width: 6px; height:6px; border-radius:50%;
  background: var(--gold);
  animation: cnPulse 1.2s ease infinite;
}
.cn-loading-dots span:nth-child(2) { animation-delay:.2s }
.cn-loading-dots span:nth-child(3) { animation-delay:.4s }
@keyframes cnPulse {
  0%,100% { opacity:.25; transform:scale(.75) }
  50%      { opacity:1;   transform:scale(1) }
}

/* ── Utility ─────────────────────────────────────────────────── */
.hidden  { display:none!important }
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

@media (max-width:640px) {
  .cn-header { padding:0 16px }
  .cn-hide-mob { display:none!important }
  .cn-wrap { padding:0 16px }
}
@media (min-width:641px) {
  .cn-hide-desk { display:none!important }
}