/* PokeBin Store — v2
   Brand-matched theme: cream base, hot-pink primary (matches the
   "PokeBin TREASURES" wordmark), orange / yellow / purple / teal accents
   from the channel banner's swirl motif. Fun, colorful, treasure-hunt energy.
   Fonts via Google Fonts CDN (see <head> in HTML files). */

:root {
  --bg: #FFF9F0;        /* cream base */
  --bg-2: #FFF6E8;      /* warm cream for alt sections */
  --bg-3: #FFFFFF;      /* white cards */
  --line: #F0DFC2;      /* warm divider line */
  --text: #33261A;      /* dark warm brown body text */
  --muted: #7A6C5D;
  --pink: #E84393;      /* primary — matches wordmark */
  --pink-deep: #C2185B; /* CTA hover / emphasis */
  --pink-soft: #FBDCEC; /* tinted fills */
  --orange: #FF7F2A;
  --yellow: #FFC93C;
  --purple: #9B5DE5;
  --teal: #00A896;
  --radius: 16px;
  --swirl: linear-gradient(90deg, var(--pink) 0%, var(--orange) 28%, var(--yellow) 48%, var(--teal) 72%, var(--purple) 100%);
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pink); color: #fff; }

a { color: var(--pink); text-decoration: none; }
a:hover { color: var(--pink-deep); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 249, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--text); }
.brand svg { width: 30px; height: 30px; }
.brand-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 10px; }
.brand-logo-sm { width: 30px; height: 30px; }
.brand span em { color: var(--pink); font-style: normal; }
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-links a.nav-yt { display: inline-flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; }
.nav-links a.nav-yt svg { color: #ff0000; flex: none; }
.nav-links a.nav-yt:hover { color: var(--pink-deep); }
.btn {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  background: var(--pink); color: #fff; border: none; cursor: pointer;
  padding: 13px 28px; border-radius: 999px; font-size: 1rem;
  box-shadow: 0 6px 18px rgba(232, 67, 147, 0.28);
  transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.btn:hover { background: var(--pink-deep); color: #fff; transform: translateY(-1px); box-shadow: 0 9px 22px rgba(232, 67, 147, 0.34); }
.btn-ghost {
  background: transparent; color: var(--text);
  border: 2px solid var(--line); box-shadow: none;
}
.btn-ghost:hover { border-color: var(--pink); color: var(--pink); background: transparent; box-shadow: none; }
.btn-sm { padding: 10px 20px; font-size: 0.9rem; }
.menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 110px 0 98px;
  background:
    radial-gradient(720px 340px at 85% -5%, rgba(255, 201, 60, 0.45), transparent 60%),
    radial-gradient(620px 320px at 4% 105%, rgba(155, 93, 229, 0.28), transparent 60%),
    radial-gradient(560px 300px at 28% -5%, rgba(232, 67, 147, 0.25), transparent 60%),
    radial-gradient(480px 280px at 98% 100%, rgba(0, 168, 150, 0.22), transparent 60%),
    var(--bg);
}
/* colorful swirl strip under the hero */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 8px; background: var(--swirl);
}
.hero-kicker {
  display: inline-block; font-family: var(--font-display); font-size: 0.8rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--pink-deep);
  border: 2px solid rgba(232, 67, 147, 0.4); border-radius: 999px;
  padding: 7px 16px; margin-bottom: 22px; background: rgba(255, 255, 255, 0.7);
}
.hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.08;
  max-width: 720px; margin-bottom: 20px;
}
.hero h1 .hl {
  background: linear-gradient(92deg, var(--pink) 10%, var(--orange) 55%, var(--purple) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lede { font-size: 1.15rem; color: var(--muted); max-width: 620px; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 26px; color: var(--muted); font-size: 0.9rem; }

/* floating card motif — bright cards on cream */
.card-fan { position: absolute; right: -40px; top: 40px; width: 380px; height: 380px; opacity: 0.85; pointer-events: none; }
.card-fan .pcard {
  position: absolute; width: 150px; height: 210px; border-radius: 14px;
  background: linear-gradient(135deg, #ffffff, #FFF3E2);
  border: 2px solid var(--pink-soft);
  box-shadow: 0 18px 44px rgba(232, 67, 147, 0.16);
}
.card-fan .pcard::after {
  content: ""; position: absolute; inset: 12px; border-radius: 10px;
  border: 2px dashed rgba(232, 67, 147, 0.35);
}
.card-fan .c1 { transform: rotate(-14deg); left: 20px; top: 60px; border-color: var(--pink-soft); }
.card-fan .c2 { transform: rotate(4deg); left: 130px; top: 30px; border-color: var(--pink); }
.card-fan .c3 { transform: rotate(20deg); left: 230px; top: 70px; border-color: #FFE3B8; }
@media (max-width: 860px) { .card-fan { display: none; } }


/* hero feature: top story card filling the right side of the hero */
.hero-feature { position: absolute; right: 28px; top: 50%; width: 330px; transform: translateY(-50%); z-index: 2; }
.hf-card { display: block; background: #fff; border: 2px solid var(--pink-soft); border-radius: 16px; overflow: hidden; text-decoration: none; box-shadow: 0 24px 54px rgba(232, 67, 147, 0.22); transform: rotate(2deg); transition: transform 0.25s ease; }
.hf-card:hover { transform: rotate(0deg) translateY(-4px); }
.hf-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hf-body { display: block; padding: 16px 18px 18px; }
.hf-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; color: var(--ink, #2b2233); margin-top: 8px; }
.hf-more { display: inline-block; margin-top: 10px; font-weight: 600; font-size: 0.9rem; color: var(--pink-deep); }
@media (max-width: 1180px) {
  /* under desktop width the floating card stacks below the hero text instead of hiding */
  .hero, .page-hero:has(.hero-feature) { display: flex; flex-direction: column; align-items: flex-start; }
  .page-hero:has(.hero-feature) { min-height: 0; padding: 44px 0 40px; }
  .hero { padding: 48px 0 44px; }
  .hero .wrap, .page-hero .wrap { order: 1; width: 100%; }
  .hero-feature { position: static; transform: none; order: 2; width: 400px; max-width: calc(100% - 48px); margin: 24px 0 4px 24px; }
}

/* ---------- Sections ---------- */
.section { padding: 84px 0; }
.section-alt {
  background: var(--bg-2);
  border-top: 4px solid transparent;
  border-image: var(--swirl) 1;
  border-bottom: 1px solid var(--line);
}
.section h2 {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 14px; font-weight: 700;
}
.section .sub { color: var(--muted); max-width: 640px; margin-bottom: 40px; }

/* ---------- Product cards ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.product-card {
  background: var(--bg-3); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 30px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 8px 24px rgba(51, 38, 26, 0.06);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.product-card:hover { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(232, 67, 147, 0.14); }
.product-card .tag {
  align-self: flex-start; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--pink-deep);
  background: var(--pink-soft); border: 1px solid rgba(232, 67, 147, 0.35);
  padding: 5px 12px; border-radius: 999px;
}
.product-card h3 { font-family: var(--font-display); font-size: 1.35rem; }
.product-card p { color: var(--muted); font-size: 0.97rem; flex: 1; }
.price-row { display: flex; align-items: baseline; gap: 10px; }
.price { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; color: var(--pink); }
.price-note { color: var(--muted); font-size: 0.85rem; }
.product-card.coming { opacity: 0.75; }
.product-card.coming .btn { visibility: hidden; }

/* ---------- Feature list / TOC ---------- */
.checklist { list-style: none; display: grid; gap: 12px; }
.checklist li {
  background: var(--bg-3); border: 2px solid var(--line); border-radius: 12px;
  padding: 14px 18px; font-size: 0.98rem; display: flex; gap: 12px; align-items: flex-start;
}
.checklist li::before { content: "✓"; color: var(--teal); font-weight: 700; flex-shrink: 0; }

/* ---------- Split layout ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.ebook-mock {
  aspect-ratio: 3/4; max-width: 340px; margin: 0 auto; border-radius: 14px;
  background: linear-gradient(150deg, #ffffff 0%, #FFF3E2 55%, #FFE9F4 100%);
  border: 3px solid var(--pink);
  box-shadow: 0 30px 70px rgba(232, 67, 147, 0.22);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 34px 28px; position: relative; overflow: hidden;
}
.ebook-mock::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at 80% 0%, rgba(255, 201, 60, 0.35), transparent 60%);
}
.ebook-mock .em-kicker { font-size: 0.7rem; letter-spacing: 0.22em; color: var(--pink-deep); text-transform: uppercase; position: relative; font-weight: 700; }
.ebook-mock h3 { font-family: var(--font-display); font-size: 1.7rem; line-height: 1.2; position: relative; color: var(--text); }
.ebook-mock .em-foot { color: var(--muted); font-size: 0.85rem; position: relative; }
.ebook-mock.cover { padding: 0; }
.ebook-mock .ebook-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card .card-cover { display: block; height: 315px; width: auto; max-width: calc(100% - 4px); margin: 0 auto 8px; border-radius: 8px; box-shadow: 0 12px 26px rgba(51, 38, 26, 0.20); }

/* ---------- FAQ ---------- */
.faq-item { border: 2px solid var(--line); border-radius: 12px; margin-bottom: 12px; background: var(--bg-3); overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: none; color: var(--text);
  font-family: var(--font-display); font-size: 1.02rem; font-weight: 600;
  padding: 18px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-q .plus { color: var(--pink); font-size: 1.3rem; flex-shrink: 0; transition: transform 0.15s ease; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a p { padding: 0 22px 20px; color: var(--muted); font-size: 0.97rem; }
.faq-item.open .faq-a { max-height: 400px; }

/* ---------- Notify form ---------- */
.notify {
  background: linear-gradient(135deg, rgba(232, 67, 147, 0.1), rgba(255, 127, 42, 0.08), rgba(255, 201, 60, 0.1));
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 44px; text-align: center;
}
.notify h2 { margin-bottom: 10px; }
.notify p { color: var(--muted); margin-bottom: 24px; }
.notify-socials { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding: 48px 0 32px; color: var(--muted); font-size: 0.9rem; background: var(--bg-2); }
.foot-grid { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: 28px; }
.foot-grid nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-grid nav a { color: var(--muted); }
.foot-grid nav a:hover { color: var(--pink-deep); }
.foot-note { border-top: 1px solid var(--line); padding-top: 22px; font-size: 0.8rem; color: #A89C8C; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: 70px 0 50px; border-bottom: 4px solid transparent;
  border-image: var(--swirl) 1;
  background:
    radial-gradient(600px 260px at 90% 0%, rgba(255, 201, 60, 0.4), transparent 60%),
    radial-gradient(520px 240px at 8% 100%, rgba(232, 67, 147, 0.2), transparent 60%),
    var(--bg-2);
}
.page-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 12px; max-width: 720px; }
.page-hero p { color: var(--muted); max-width: 640px; }

/* ---------- Prose ---------- */
.prose { max-width: 720px; }
.prose h2 { margin: 40px 0 12px; font-size: 1.5rem; }
.prose p { color: #4A3D30; margin-bottom: 16px; }
.prose ul { margin: 0 0 16px 22px; color: #4A3D30; }

/* ---------- JP Set Tracker ---------- */
.tracker-toolbar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-bottom: 22px;
}
.tracker-search {
  flex: 1; min-width: 220px; background: #fff; border: 2px solid var(--line);
  border-radius: 999px; padding: 12px 20px; color: var(--text); font-size: 1rem;
  font-family: var(--font-body);
}
.tracker-search:focus { outline: none; border-color: var(--pink); }
.tracker-select {
  background: #fff; border: 2px solid var(--line); border-radius: 999px;
  padding: 12px 16px; color: var(--text); font-size: 0.95rem; font-family: var(--font-body);
  cursor: pointer;
}
.tracker-select:focus { outline: none; border-color: var(--pink); }

.tracker-overall {
  background: var(--bg-3); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 20px 24px; margin-bottom: 30px;
}
.tracker-overall-labels { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tracker-overall-labels strong { font-family: var(--font-display); font-size: 1.05rem; }
.tracker-overall-labels span { color: var(--muted); font-size: 0.95rem; }

.progress {
  height: 12px; background: #F5E9D4; border-radius: 999px; overflow: hidden;
}
.progress.slim { height: 8px; margin: 12px 0 4px; }
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--swirl);
  transition: width 0.3s ease;
}

.set-group { margin-bottom: 36px; }
.set-group h3 {
  font-family: var(--font-display); font-size: 1.35rem; margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.era-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.era-anniversary { background: linear-gradient(135deg, var(--pink), var(--orange)); }
.era-mega { background: linear-gradient(135deg, var(--purple), var(--teal)); }
.era-sv { background: linear-gradient(135deg, var(--yellow), var(--orange)); }

.set-card {
  background: var(--bg-3); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px;
}
.set-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.set-head h4 { font-family: var(--font-display); font-size: 1.25rem; }
.set-en { color: var(--muted); font-size: 0.92rem; }
.set-pct {
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem;
  background: var(--swirl); -webkit-background-clip: text; background-clip: text; color: transparent;
  flex-shrink: 0;
}
.set-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.chip {
  font-size: 0.82rem; background: var(--pink-soft); color: var(--pink-deep);
  border-radius: 999px; padding: 4px 12px; font-weight: 600; white-space: nowrap;
}

.chase-head, .chase-row {
  display: grid; grid-template-columns: 1fr 86px 86px; gap: 8px; align-items: center;
}
.chase-head {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); font-weight: 700; margin: 14px 0 6px; text-align: center;
}
.chase-head span:first-child { text-align: left; }
.chase-row { padding: 9px 0; border-top: 1px solid var(--line); }
.chase-name { font-size: 0.97rem; }
.chase-check { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; font-size: 0.85rem; color: var(--muted); }
.chase-check input { width: 18px; height: 18px; accent-color: var(--pink); cursor: pointer; }
.chase-check input:checked + span { color: var(--pink-deep); font-weight: 600; }
.chase-empty { color: var(--muted); font-size: 0.92rem; padding: 10px 0; }

.chase-add { display: flex; gap: 8px; margin-top: 10px; }
.chase-add input {
  flex: 1; background: var(--bg); border: 2px dashed var(--line); border-radius: 12px;
  padding: 9px 14px; color: var(--text); font-size: 0.9rem; font-family: var(--font-body);
}
.chase-add input:focus { outline: none; border-color: var(--pink); border-style: solid; }

.set-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); flex-wrap: wrap;
}
.price-field { font-size: 0.9rem; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.price-field input {
  width: 110px; background: var(--bg); border: 2px solid var(--line); border-radius: 10px;
  padding: 7px 12px; color: var(--text); font-size: 0.95rem; font-family: var(--font-body);
}
.price-field input:focus { outline: none; border-color: var(--pink); }
.set-del {
  background: none; border: none; color: var(--muted); font-size: 0.85rem;
  cursor: pointer; text-decoration: underline;
}
.set-del:hover { color: var(--pink-deep); }

.add-set-wrap { margin: 8px 0 30px; }
.add-set-form {
  background: var(--bg-3); border: 2px solid var(--line); border-radius: var(--radius);
  padding: 26px; margin-top: 16px;
}
.add-set-form h3 { font-family: var(--font-display); margin-bottom: 4px; }
.add-set-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.add-set-fields label { font-size: 0.88rem; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.add-set-fields label.full { grid-column: 1 / -1; }
.add-set-fields input, .add-set-fields select, .add-set-fields textarea {
  background: var(--bg); border: 2px solid var(--line); border-radius: 10px;
  padding: 10px 14px; color: var(--text); font-size: 0.95rem; font-family: var(--font-body); font-weight: 400;
}
.add-set-fields input:focus, .add-set-fields select:focus, .add-set-fields textarea:focus { outline: none; border-color: var(--pink); }

.tracker-note { color: var(--muted); font-size: 0.88rem; max-width: 760px; }
.tracker-empty { color: var(--muted); padding: 30px 0; text-align: center; }

@media (max-width: 560px) {
  .chase-head, .chase-row { grid-template-columns: 1fr 70px 70px; }
  .chase-check span { display: none; }
  .add-set-fields { grid-template-columns: 1fr; }
  .tracker-overall-labels { flex-direction: column; gap: 4px; }
}
@media (max-width: 1100px) {
  .menu-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    background: var(--bg); flex-direction: column; align-items: stretch;
    padding: 12px 24px 20px; border-bottom: 1px solid var(--line); gap: 4px;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 10px 0; border-bottom: 1px solid var(--line); }
  .nav-links .btn { margin-top: 10px; text-align: center; }
}

/* ---------- Social links (footer) ---------- */
.socials { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.socials span { color: var(--muted); font-size: 0.9rem; }
.socials a {
  font-size: 0.88rem; font-weight: 600; background: var(--pink-soft); color: var(--pink-deep);
  border-radius: 999px; padding: 6px 14px; transition: background 0.15s ease, color 0.15s ease;
}
.socials a:hover { background: var(--pink); color: #fff; }

/* ---------- News ---------- */
.tier { display: inline-block; font-family: var(--font-display); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; color: #fff; }
.tier-confirmed { background: var(--teal); }
.tier-rumor { background: var(--purple); }
.tier-fun { background: var(--orange); }
.news-card { background: var(--bg-3); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .2s, transform .2s, box-shadow .2s; }
.news-card:hover { border-color: var(--pink); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(232, 67, 147, 0.14); }
.news-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.news-card .nc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card h3 { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.3; }
.news-card h3 a { color: var(--text); }
.news-card h3 a:hover { color: var(--pink-deep); }
.news-card p { color: var(--muted); font-size: 0.95rem; flex: 1; }
.news-meta { color: var(--muted); font-size: 0.82rem; display: flex; align-items: center; gap: 10px; }
.article-wrap { max-width: 760px; margin: 0 auto; }
.article-hero { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); margin: 24px 0 8px; }
.article-wrap h1 { font-family: var(--font-display); font-size: 2.1rem; line-height: 1.2; margin: 14px 0 10px; }
.article-body p { font-size: 1.05rem; line-height: 1.75; margin: 0 0 18px; }
.article-body h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 30px 0 12px; }
.sources-box { border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); padding: 16px 20px; margin: 28px 0; font-size: 0.92rem; }
.sources-box p { margin: 4px 0; }


.share-top { display: flex; justify-content: flex-end; gap: 10px; margin: 14px 0 18px; }
.share-icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: inherit; cursor: pointer; text-decoration: none; padding: 0; }
.share-icon-btn:hover { border-color: #d4a94e; }
.share-icon-btn[data-tip]::after { content: attr(data-tip); position: absolute; top: -30px; left: 50%; transform: translateX(-50%); background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }

.share-sep { width: 1px; align-self: stretch; background: var(--line); margin: 4px 2px; }
.share-icon-btn.active { border-color: #d4a94e; background: #fdf3d7; color: #8a6414; }

.helpful-box { border: 1px solid var(--line); background: var(--bg-2); border-radius: var(--radius); padding: 16px 20px; margin: 28px 0; }
.helpful-label { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; margin: 0 0 12px; }
.helpful-row { display: flex; gap: 10px; }
.helpful-btn { appearance: none; -webkit-appearance: none; border: 1px solid var(--line); background: var(--bg); color: inherit; border-radius: 999px; padding: 8px 22px; font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.helpful-btn:hover { border-color: #d4a94e; }
.helpful-btn.active { border-color: #d4a94e; background: #fdf3d7; color: #8a6414; }

/* ghost dragon backdrop + text layering for heroes */
.hero .wrap, .page-hero .wrap { position: relative; z-index: 2; }
.hero-dragon { position: absolute; right: -70px; top: 50%; transform: translateY(-50%); width: 640px; max-width: 62vw; opacity: 0.14; pointer-events: none; z-index: 1; }
@media (max-width: 860px) { .hero-dragon { display: none; } }
.hf-card.still:hover { transform: rotate(2deg); }
.hf-card.brand-card img { aspect-ratio: auto; object-fit: contain; height: 185px; padding: 16px 20px 0; }
.mini-rows { display: block; margin-top: 10px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.mini-row:last-child { border-bottom: none; }
.mini-check { flex: none; width: 17px; height: 17px; border: 2px solid #d4a94e; border-radius: 5px; }
.mini-check.done { background: #d4a94e; }
.mini-set { font-weight: 600; }
.mini-count { margin-left: auto; color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.mini-bar { display: block; height: 8px; border-radius: 99px; background: var(--bg-2); margin-top: 14px; overflow: hidden; }
.mini-bar-fill { display: block; height: 100%; width: 38%; border-radius: 99px; background: linear-gradient(90deg, #d4a94e, #e84393); }
.mini-note { display: block; margin-top: 9px; font-size: 0.85rem; color: var(--muted); }
.fact-list { display: block; margin-top: 8px; }
.fact-list span { display: block; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 0.95rem; }
.fact-list span:last-child { border-bottom: none; }

/* page heroes with a feature card get the height the card needs */
.page-hero:has(.hero-feature) { min-height: 410px; display: flex; align-items: center; }
.page-hero:has(.hero-feature) .wrap { width: 100%; }
@media (max-width: 1180px) {
  /* must follow the desktop rule above: same specificity, later position wins in the band */
  .page-hero:has(.hero-feature) { min-height: 0; align-items: flex-start; }
}

/* homepage and news dragons ride higher so the head clears the story card */
.hero-dragon.home, .hero-dragon.raised { top: -26px; transform: none; }

#guides .grid { align-items: start; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.product-card.tile { background: none; border: none; box-shadow: none; padding: 0; gap: 12px; }
.product-card.tile:hover { transform: none; box-shadow: none; }
.product-card.tile .tile-cover { display: block; line-height: 0; }
.product-card.tile .card-cover { width: 100%; height: auto; max-width: 100%; margin: 0; border-radius: 14px; box-shadow: 0 14px 30px rgba(51, 38, 26, 0.16); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.product-card.tile .tile-cover:hover .card-cover { transform: translateY(-4px); box-shadow: 0 22px 38px rgba(51, 38, 26, 0.22); }
.product-card.tile p { padding: 0 2px; }
.product-card.tile .btn { align-self: flex-start; }

/* Email capture band + footer legal row (2026-10-17) */
.email-band-sec { padding: 8px 0 40px; }
.email-band { border: 2px solid #d4a94e; background: var(--bg-2); border-radius: var(--radius); padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
.email-band-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 4px; color: var(--ink, #2b2233); }
.email-band-text { margin: 0; color: var(--muted); max-width: 46ch; }
.email-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.email-input { font: inherit; padding: 12px 16px; border: 2px solid var(--line); border-radius: 999px; min-width: 240px; background: #fff; color: var(--ink, #2b2233); }
.email-input:focus { outline: none; border-color: #d4a94e; }
.email-thanks { font-family: var(--font-display); font-weight: 600; margin: 0; }
.foot-legal { margin-top: 10px; }
.foot-legal a { margin-right: 18px; }

/* ---------- Set Archive (sets.html, added 2026-10-18) ---------- */
.arch-jump { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; }
.arch-jump a {
  font-family: var(--font-display); font-weight: 600; font-size: 0.92rem;
  border: 2px solid var(--line); background: var(--bg-3); color: var(--text);
  padding: 7px 16px; border-radius: 999px;
}
.arch-jump a:hover { border-color: var(--pink); color: var(--pink-deep); }
.arch-market h2 { font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 8px; }
.arch-era {
  font-family: var(--font-display); font-size: 1.15rem; margin: 34px 0 6px;
  display: flex; align-items: baseline; gap: 10px;
}
.arch-era-count { font-size: 0.82rem; color: var(--muted); font-weight: 500; }
.arch-list { border-top: 2px solid var(--line); }
.arch-row {
  display: grid; grid-template-columns: 118px 1fr 190px; gap: 18px;
  padding: 16px 4px; border-bottom: 1px solid var(--line); align-items: start;
}
.arch-date { font-weight: 600; font-size: 0.92rem; color: var(--muted); padding-top: 2px; }
.arch-name { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.3; }
.arch-badge {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--yellow); color: #5c4300; border-radius: 999px; padding: 2px 9px;
}
.arch-sub { color: var(--muted); font-size: 0.9rem; margin-top: 1px; }
.arch-note { color: var(--muted); font-size: 0.95rem; margin-top: 5px; max-width: 560px; }
.arch-meta { display: flex; flex-direction: column; gap: 1px; text-align: right; }
.arch-cards { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.arch-detail { color: var(--muted); font-size: 0.8rem; }
.arch-chase-label {
  margin-top: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--pink-deep);
}
.arch-chase { font-weight: 600; font-size: 0.92rem; }
.arch-track { margin-top: 8px; font-size: 0.85rem; font-weight: 600; }
@media (max-width: 760px) {
  .arch-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 2px; }
  .arch-meta { text-align: left; }
  .arch-chase-label { margin-top: 4px; }
}

/* Set Archive imagery (added 2026-10-18) */
.arch-head { display: flex; align-items: center; gap: 14px; }
.arch-logo { max-height: 54px; max-width: 168px; width: auto; object-fit: contain; flex: none; }
.arch-chase-row { display: flex; gap: 14px; margin-top: 10px; align-items: flex-start; }
.arch-chase-row .arch-note { margin-top: 2px; }
.arch-card-img {
  width: 92px; flex: none; display: block;
  border-radius: 8px; border: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(51, 38, 26, 0.12);
}
@media (max-width: 760px) {
  .arch-logo { max-height: 44px; max-width: 138px; }
  .arch-card-img { width: 76px; }
}

/* Set Archive uniform image stages (2026-10-18) */
.arch-logo-stage {
  width: 176px; height: 80px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; padding: 6px 10px;
}
.arch-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.arch-card-img { width: 92px; height: 129px; object-fit: cover; }
@media (max-width: 760px) {
  .arch-logo-stage { width: 148px; height: 68px; }
  .arch-card-img { width: 76px; height: 106px; }
}

/* Nav fit fix (2026-10-18): the added Set Archive tab overflowed the bar,
   wrapping labels onto two lines. Nothing in the bar may wrap now, spacing
   is tightened, and the hamburger menu takes over below 1100px. */
.brand { white-space: nowrap; font-size: 1.15rem; }
.nav-links { gap: 20px; }
.nav-links a { white-space: nowrap; font-size: 0.92rem; }
.nav-links .btn { white-space: nowrap; }

/* Archive card placement (2026-10-18): chase card image sits under the
   chase card name in the right column, both markets, one template. */
.arch-meta .arch-card-img { margin-top: 10px; align-self: flex-end; }

/* Archive size line (2026-10-18): card count sits under the note with the
   set's own facts; the right column is the chase panel only. */
.arch-size { margin-top: 8px; }
.arch-size .arch-detail { margin-left: 6px; }
.arch-meta .arch-chase-label { margin-top: 0; }

/* Tracker set imagery + archive deep links (2026-10-18) */
.set-card { scroll-margin-top: 84px; }
.set-card:target { border-color: var(--pink); box-shadow: 0 8px 28px rgba(232, 67, 147, 0.22); }
.set-head { align-items: center; }
.set-logo-stage {
  width: 132px; height: 60px; flex: none;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  display: flex; align-items: center; justify-content: center; padding: 4px 8px;
}
.set-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.chase-thumb {
  width: 40px; height: 56px; object-fit: cover; flex: none;
  border-radius: 5px; border: 1px solid var(--line);
}
.chase-row { align-items: center; }