:root {
  --bg: #070b18;
  --bg-alt: #0c1224;
  --surface: #121a2e;
  --border: rgba(255,255,255,0.08);
  --text: #e8eef7;
  --muted: #9aa6bc;
  --accent: #22d3ee;
  --accent-2: #3b82f6;
  --orange: #f97316;
  --radius: 16px;
  --max: 1120px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: Inter, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}
h1, h2, h3, h4, .brand-text { font-family: Outfit, Inter, sans-serif; font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
img { max-width: 100%; display: block; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 720px; }

/* Header */
.header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(7,11,24,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; }
.brand-text { font-size: 1.15rem; letter-spacing: -0.02em; }
.brand-text span { color: var(--accent); }
nav { display: flex; gap: 28px; }
nav a { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
nav a:hover { color: var(--text); }

/* Hero */
.hero {
  padding: 100px 0 80px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(34,211,238,0.12), transparent 60%);
}
.eyebrow {
  display: inline-block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero-sub {
  font-size: 1.2rem;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 36px;
}
.cta {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #041016;
  font-weight: 600;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 1rem;
}
.cta:hover { filter: brightness(1.08); }

/* Sections */
.section { padding: 80px 0; }
.section-alt { background: var(--bg-alt); }
h2 {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.section-lead {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 640px;
  margin-bottom: 40px;
}

/* Principles */
.philosophy-visual {
  margin: 32px 0 40px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  max-width: 900px;
}
.philosophy-img { width: 100%; height: auto; display: block; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.principle {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.principle .num {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}
.principle h3 { margin: 8px 0 8px; font-size: 1.15rem; }
.principle p { color: var(--muted); font-size: 0.95rem; }

/* Sleeves */
.sleeve-group { margin-bottom: 48px; }
.group-label {
  color: var(--accent);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 0.2s;
}
.card:hover { border-color: rgba(34,211,238,0.3); }
.card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.card h4 { font-size: 1.3rem; }
.tag {
  background: rgba(34,211,238,0.12);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.weights {
  font-family: Outfit, sans-serif;
  font-weight: 600;
  color: #fff;
  margin-bottom: 14px;
  font-size: 0.95rem;
}
.card p { color: var(--muted); font-size: 0.95rem; }

/* Rules */
.rules { list-style: none; }
.rules li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 12px;
  color: var(--muted);
}
.rules strong { color: var(--text); }

/* Benchmarks */
.benchmarks {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin: 24px 0;
}
.benchmarks span {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
}
.note { color: var(--muted); max-width: 640px; }

/* Tracker */
.tracker {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}
.tracker-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 28px;
}
.control label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.control select, .control input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
}
.control select:focus, .control input:focus {
  outline: none;
  border-color: var(--accent);
}
.results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 800px) {
  .results { grid-template-columns: 1fr; }
}
.summary-box {
  background: var(--bg);
  border-radius: 12px;
  padding: 20px;
}
.summary-box h3 { margin-bottom: 12px; font-size: 1.1rem; }
.metric { display: flex; justify-content: space-between; margin-bottom: 8px; font-size: 0.95rem; }
.metric span:last-child { font-weight: 600; color: var(--accent); }
.alloc-row {
  display: flex; align-items: center; margin-bottom: 10px; gap: 12px;
}
.alloc-label { width: 70px; font-size: 0.9rem; }
.bar-wrap { flex: 1; height: 10px; background: rgba(255,255,255,0.06); border-radius: 5px; overflow: hidden; }
.bar { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: 5px; }
.alloc-pct { width: 50px; text-align: right; font-size: 0.85rem; color: var(--muted); }
.note-small { font-size: 0.8rem; color: var(--muted); margin-top: 16px; }
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  text-align: center;
  color: var(--muted);
}
.footer-logo { width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 8px; }
.footer .small { font-size: 0.8rem; max-width: 640px; margin: 12px auto 0; opacity: 0.7; }

@media (max-width: 640px) {
  nav { display: none; }
  .hero { padding: 70px 0 50px; }
  .section { padding: 60px 0; }
  .cards { grid-template-columns: 1fr; }
}
/* Articles */
.articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.article {
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 1.25rem;
}
.article-date {
  color: #22d3ee;
  font-size: 0.8rem;
  margin: 0 0 0.5rem;
}
.article h3 {
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}
.article p {
  color: #9aa6bc;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0 0 0.8rem;
}
.article-link {
  color: #22d3ee;
  font-size: 0.85rem;
  text-decoration: none;
}
.article-link:hover { text-decoration: underline; }

.article-full {
  margin-top: 0.8rem;
}
.article-full p {
  margin: 0 0 0.75rem;
}
.article-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-top: 0.75rem;
}
.read-toggle {
  background: transparent;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}
.read-toggle:hover {
  background: #22d3ee;
  color: #070b18;
}

/* Full-page article modal */
.article-modal {
  position: fixed;
  inset: 0;
  background: #070b18;
  z-index: 1000;
  overflow-y: auto;
  padding: 2rem 1rem;
}
.article-modal-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  background: transparent;
  border: none;
  color: #9aa6bc;
  font-size: 2rem;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: #fff; }
#modal-content h2 {
  margin: 0.5rem 0 1.5rem;
  font-size: 1.8rem;
}
.modal-body p {
  color: #e2e8f0;
  line-height: 1.7;
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

/* Full-screen article modal */
.article-modal {
  position: fixed;
  inset: 0;
  background: #070b18;
  z-index: 1000;
  overflow-y: auto;
  padding: 2rem 3rem;
  color: #e2e8f0;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #1e293b;
}
.modal-header h2 {
  margin: 0.3rem 0 0;
  font-size: 1.8rem;
  line-height: 1.2;
}
.modal-date {
  color: #22d3ee;
  font-size: 0.85rem;
  margin: 0;
}
.modal-actions {
  display: flex;
  gap: 0.75rem;
  flex-shrink: 0;
}
.download-pdf, .close-modal {
  background: transparent;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  cursor: pointer;
}
.download-pdf:hover, .close-modal:hover {
  background: #22d3ee;
  color: #070b18;
}
.modal-body {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.7;
}
.modal-body p {
  margin: 0 0 1rem;
}

/* X-Article style modal refinements */
.article-modal {
  background: #0a0e17;
  padding: 2.5rem 4rem 4rem;
}
.modal-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.modal-logo {
  width: 48px;
  height: 41px;
  border-radius: 8px;
}
.modal-header h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: 2rem;
  letter-spacing: -0.02em;
}
.modal-body {
  max-width: 680px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
  color: #cbd5e1;
}
.modal-body p {
  margin: 0 0 1.1rem;
}
.modal-body p:first-of-type {
  font-size: 1.15rem;
  color: #e2e8f0;
}

/* Graphic full-page article expand */
.article-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #0f172a 0%, #070b18 60%);
  z-index: 1000;
  overflow-y: auto;
  padding: 0;
  color: #e2e8f0;
  animation: modalIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-hero {
  position: relative;
  padding: 2.5rem 4rem 1.5rem;
  background: linear-gradient(180deg, rgba(34,211,238,0.08) 0%, transparent 100%);
  border-bottom: 1px solid rgba(34,211,238,0.15);
  overflow: hidden;
}
.modal-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(34,211,238,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.modal-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}
.modal-logo {
  width: 56px;
  height: 48px;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.3);
}
.modal-header h2 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  letter-spacing: -0.025em;
  margin: 0.2rem 0 0;
  line-height: 1.15;
}
.modal-date {
  color: #22d3ee;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}
.modal-actions {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  display: flex;
  gap: 0.6rem;
}
.download-pdf, .close-modal {
  background: rgba(7,11,24,0.7);
  border: 1px solid #22d3ee;
  color: #22d3ee;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.15s ease;
}
.download-pdf:hover, .close-modal:hover {
  background: #22d3ee;
  color: #070b18;
}
.modal-body {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.06rem;
  line-height: 1.75;
  color: #cbd5e1;
}
.modal-body p {
  margin: 0 0 1.15rem;
}
.modal-body p:first-of-type {
  font-size: 1.18rem;
  color: #f1f5f9;
  font-weight: 500;
}

/* YTD table */
.as-of {
  color: #22d3ee;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}
.ytd-table {
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 12px;
  overflow: hidden;
  margin: 1rem 0;
}
.ytd-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 0.5rem;
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid #1e293b;
  align-items: center;
}
.ytd-row:last-child { border-bottom: none; }
.ytd-head {
  background: #111827;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa6bc;
}
.sleeve-name { font-weight: 600; }
.neg { color: #f87171; }
.pos { color: #4ade80; }
.ytd-bench {
  background: rgba(34,211,238,0.05);
  font-size: 0.9rem;
}

/* Interactive YTD tracker */
.sleeve-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 1.25rem;
}
.sleeve-btn {
  background: #0d1220;
  border: 1px solid #1e293b;
  color: #9aa6bc;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sleeve-btn:hover { border-color: #22d3ee; color: #e2e8f0; }
.sleeve-btn.active {
  background: #22d3ee;
  color: #070b18;
  border-color: #22d3ee;
  font-weight: 600;
}
.tracker-visual {
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.tracker-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.stat { text-align: center; }
.stat-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa6bc;
  margin-bottom: 0.25rem;
}
.stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  font-family: 'Outfit', system-ui, sans-serif;
}
.chart-wrap {
  height: 220px;
  position: relative;
}
@media (max-width: 600px) {
  .tracker-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Benchmark selector */
.bench-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0.5rem;
  flex-wrap: wrap;
}
.bench-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #9aa6bc;
  margin-right: 0.25rem;
}
.bench-btn {
  background: transparent;
  border: 1px solid #1e293b;
  color: #9aa6bc;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
}
.bench-btn.active {
  border-color: #22d3ee;
  color: #22d3ee;
}

/* Philosophy graphic */
.philosophy-visual { margin: 1.5rem 0; }
.phil-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(135deg, #0d1220 0%, #111827 100%);
  border: 1px solid #1e293b;
  border-left: 3px solid #22d3ee;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  max-width: 520px;
}
.phil-mark {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #22d3ee;
  color: #070b18;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.phil-title {
  display: block;
  font-weight: 600;
  font-size: 1.05rem;
}
.phil-sub {
  display: block;
  color: #9aa6bc;
  font-size: 0.9rem;
  margin-top: 0.2rem;
}

/* Monthly close button */
.month-close-btn {
  background: transparent;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.78rem;
  cursor: pointer;
  margin-bottom: 1rem;
}
.month-close-btn:hover { background: #22d3ee; color: #070b18; }

/* Rules left-align */
#rules .container { text-align: left; }
#rules h2, #rules .rules { text-align: left; }

/* Floating back-to-top */
.back-to-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  background: #22d3ee;
  color: #070b18;
  border: none;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 50;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.back-to-top:hover { background: #67e8f9; }

/* Principles — one line on desktop */
.principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: 1.5rem;
}
.principle {
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 1rem 0.9rem;
  text-align: left;
}
.principle .num {
  display: block;
  color: #22d3ee;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.principle h3 {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}
.principle p {
  margin: 0;
  font-size: 0.82rem;
  color: #9aa6bc;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .principles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
  .principles-grid { grid-template-columns: 1fr; }
}

/* Copy weights */
.weights-pre {
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 8px;
  padding: 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #e2e8f0;
  white-space: pre-wrap;
  margin: 0.75rem 0;
}
.copy-btn, .pdf-link {
  display: inline-block;
  background: transparent;
  border: 1px solid #22d3ee;
  color: #22d3ee;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  text-decoration: none;
  cursor: pointer;
  margin-right: 0.5rem;
}
.copy-btn:hover, .pdf-link:hover { background: #22d3ee; color: #070b18; }
.footer a { color: #22d3ee; text-decoration: none; }
.footer a:hover { text-decoration: underline; }

/* Principles banner */
.principles-banner {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  margin-top: 1.5rem;
  background: #0d1220;
  border: 1px solid #1e293b;
  border-radius: 12px;
  padding: 1.5rem;
}
.banner-logo {
  flex: 0 0 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-right: 1px solid #1e293b;
  padding-right: 1.5rem;
}
.banner-owl {
  width: 110px;
  height: 94px;
}
.banner-brand {
  font-weight: 600;
  font-size: 1rem;
  color: #ffffff;
  text-align: center;
}
.principles-banner .principles-grid {
  flex: 1;
  margin-top: 0;
  grid-template-columns: repeat(5, 1fr);
}
.principles-banner .principle {
  background: transparent;
  border: none;
  padding: 0.5rem 0.6rem;
}
@media (max-width: 900px) {
  .principles-banner { flex-direction: column; }
  .banner-logo { border-right: none; border-bottom: 1px solid #1e293b; padding-right: 0; padding-bottom: 1rem; flex: none; }
  .principles-banner .principles-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Live BTC widget */
.btc-live{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 18px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);font-size:.95rem;color:var(--muted)}
.btc-live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e}
.btc-live.err .btc-live-dot{background:var(--orange);box-shadow:none}
.btc-live-label{font-weight:600;color:var(--orange);text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.btc-live-price{font-family:'Outfit',sans-serif;font-size:1.35rem;font-weight:700;color:var(--text)}
.btc-live-chg.up{color:#22c55e}.btc-live-chg.down{color:#ef4444}
.btc-live-time{margin-left:auto;font-size:.8rem}

/* Live portfolios */
.pf-live{margin:0 0 22px}
.pf-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.pf-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;cursor:pointer;transition:border-color .2s}
.pf-card:hover,.pf-card.open{border-color:var(--accent)}
.pf-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 10px}
.pf-name{font-weight:600;color:var(--text)}
.pf-val{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.2rem;color:var(--text)}
.pf-sub{width:100%;font-size:.8rem;color:var(--muted)}
.pf-sub .up,.pf-tbl .up{color:#22c55e}.pf-sub .down{color:#ef4444}
.pf-tbl{display:none;width:100%;margin-top:10px;border-collapse:collapse;font-size:.78rem;color:var(--muted)}
.pf-card.open .pf-tbl{display:table}
.pf-tbl th,.pf-tbl td{text-align:right;padding:3px 4px;border-top:1px solid var(--border)}
.pf-tbl th:first-child,.pf-tbl td:first-child{text-align:left}
.pf-tbl em{font-style:normal;opacity:.7;font-size:.7rem}
.pf-note{font-size:.75rem;color:var(--muted);margin-top:8px}

/* Header BTC ticker */
.hdr-tick{display:inline-flex;align-items:center;gap:4px;padding:5px 12px;margin-left:auto;margin-right:20px;background:var(--surface);border:1px solid var(--border);border-radius:999px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.9rem;color:var(--text);white-space:nowrap}
.hdr-sym{color:var(--orange)}
.hdr-chg{font-size:.8rem}.hdr-chg.up{color:#22c55e}.hdr-chg.down{color:#ef4444}
@media (max-width:800px){.hdr-tick{margin-right:0;padding:4px 9px;font-size:.8rem}.hdr-chg{font-size:.72rem}}
@media (max-width:420px){.brand-text{font-size:1rem}.brand{gap:8px}.hdr-tick{padding:3px 8px;font-size:.75rem}}

/* Rules summary links + detailed rules */
.rules li a { color: inherit; text-decoration: none; display: block; }
.rules li a:hover strong { color: var(--accent, #f7931a); }
.rules li a strong::after { content: " ↓"; opacity: .6; font-weight: 400; }
#portfolio-rules h2, #portfolio-rules .rules { text-align: left; }
#portfolio-rules li { scroll-margin-top: 90px; }

/* Portfolio pulse strip */
.pulse{padding:8px 0 28px}
.pulse-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pulse-link{color:var(--accent);font-size:.85rem;font-weight:500}
.pulse-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.pulse-card{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);transition:border-color .2s}
.pulse-card:hover{border-color:var(--accent)}
.pulse-name{font-size:.78rem;color:var(--muted)}
.pulse-val{font-family:'Outfit',sans-serif;font-weight:700;font-size:1.15rem}
.pulse-chg{font-size:.78rem;color:var(--muted)}
.pulse-chg .up{color:#22c55e}.pulse-chg .down{color:#ef4444}
.pulse-note{font-size:.7rem;color:var(--muted);margin-top:6px}
@media (max-width:700px){.pulse-grid{grid-template-columns:1fr 1fr;gap:8px}.pulse-card{padding:10px 12px}.pulse-val{font-size:1rem}}
.pf-start{display:none;margin-top:8px;font-size:.72rem;color:var(--muted)}
.pf-card.open .pf-start{display:block}
.pf-grid{align-items:start}
.pf-card.open{grid-column:1/-1}
.pf-tbl em{white-space:nowrap}

/* ===== Articles restyle (X-article quality) ===== */
#articles .articles{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
#articles .article{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px 26px 22px;overflow:hidden;transition:border-color .2s,transform .2s}
#articles .article::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
#articles .article:hover{border-color:rgba(34,211,238,.45);transform:translateY(-2px)}
#articles .article-date{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
#articles .article h3{font-family:'Outfit',sans-serif;font-size:1.4rem;line-height:1.25;letter-spacing:-.01em;color:var(--text);margin:0 0 12px}
#articles .article-excerpt p{font-size:1rem;line-height:1.65;color:var(--muted);margin:0}
#articles .article-actions{margin-top:auto;padding-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#articles .read-toggle,#articles .article-link{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:.88rem;font-weight:600;text-decoration:none;cursor:pointer;transition:all .2s}
#articles .read-toggle{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:var(--bg);border:0}
#articles .read-toggle:hover{filter:brightness(1.1)}
#articles .article-link{background:transparent;color:var(--text);border:1px solid var(--border)}
#articles .article-link:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* Expanded reader */
.article-modal--x{animation:artIn .28s ease-out}
@keyframes artIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.article-modal--x .modal-hero,.article-modal--x .modal-body{max-width:68ch;margin-left:auto;margin-right:auto}
.article-modal--x .modal-date{color:var(--accent);text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600}
.article-modal--x .modal-hero h2{font-family:'Outfit',sans-serif;font-size:clamp(1.7rem,4.5vw,2.6rem);line-height:1.15;letter-spacing:-.02em}
.article-modal--x .modal-body{font-size:1.125rem;line-height:1.72;color:#d5dde9;padding-bottom:64px}
.article-modal--x .modal-body p{margin:0 0 1.15em;font-size:inherit;line-height:inherit;color:inherit}
.article-modal--x .modal-body > p:first-child{font-size:1.25rem;line-height:1.6;color:var(--text)}
.article-modal--x .modal-body > p:first-child::first-letter{float:left;font-family:'Outfit',sans-serif;font-weight:700;font-size:3.4em;line-height:.9;padding:.06em .1em 0 0;color:var(--accent)}
.article-modal--x .article-subhead{font-family:'Outfit',sans-serif;font-size:1.4rem;line-height:1.3;color:var(--text);margin:1.9em 0 .6em;padding-left:12px;border-left:3px solid var(--accent)}
.article-modal--x .download-pdf,.article-modal--x .close-modal{border-radius:999px}
@media (max-width:600px){
  #articles .article{padding:22px 18px 18px}
  #articles .article h3{font-size:1.22rem}
  .article-modal--x .modal-body{font-size:1.05rem;line-height:1.7}
  .article-modal--x .modal-body > p:first-child{font-size:1.12rem}
  .article-modal--x .article-subhead{font-size:1.2rem}
}
@media (max-width:600px){
  .article-modal--x .modal-hero{padding:1.25rem 1.25rem 1.25rem;display:flex;flex-direction:column-reverse;gap:14px}
  .article-modal--x .modal-actions{position:static;align-self:flex-end}
}

/* ===== Articles: finance pamphlet ===== */
#articles .article{padding:0 26px 22px}
#articles .article::before{content:"₿";position:static;display:flex;align-items:center;justify-content:center;height:108px;margin:0 -26px 20px;font-family:'Source Serif 4',Georgia,serif;font-size:3rem;font-weight:600;color:rgba(255,255,255,.88);background:radial-gradient(circle at 80% 20%,rgba(34,211,238,.35),transparent 55%),linear-gradient(135deg,#0b2a3d,#12306b 60%,#1d4ed8);border-bottom:1px solid rgba(34,211,238,.25);transition:filter .25s}
#articles .article:hover{border-color:rgba(34,211,238,.55);transform:translateY(-3px);box-shadow:0 12px 30px -12px rgba(34,211,238,.25)}
#articles .article:hover::before{filter:brightness(1.15)}
#articles .article h3{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:1.45rem;letter-spacing:0}
#articles .article-excerpt p{font-family:'Source Serif 4',Georgia,serif;font-size:1.04rem;line-height:1.7}
.article-modal--x .modal-hero h2{font-family:'Source Serif 4',Georgia,serif;font-weight:700;letter-spacing:-.01em}
.article-modal--x .modal-hero{border-bottom:1px solid var(--border);padding-bottom:1.4rem;margin-bottom:2.2rem}
.article-modal--x .modal-hero h2{padding-right:0}
.article-modal--x .modal-hero,.article-modal--x .modal-body{max-width:66ch;padding-left:24px;padding-right:24px;box-sizing:content-box}
.article-modal--x .modal-body{font-family:'Source Serif 4',Georgia,'Times New Roman',serif;font-size:1.15rem;line-height:1.78;color:#d8e0ec;font-feature-settings:"onum" 0,"kern" 1}
.article-modal--x .modal-body p{margin:0 0 1.35em;hyphens:auto}
.article-modal--x .modal-body > p:first-child{font-size:inherit;line-height:inherit;color:inherit}
.article-modal--x .modal-body > p:first-child::first-letter{all:unset}
.article-modal--x .modal-body > p:first-of-type::first-letter{float:left;font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:3.6em;line-height:.82;padding:.08em .12em 0 0;color:var(--accent)}
.article-modal--x .modal-body strong{color:#fff;font-weight:700}
.article-modal--x .article-subhead{font-family:'Outfit',sans-serif;font-size:1.3rem;font-weight:700;letter-spacing:.01em;border-left:0;padding-left:0;margin:2.4em 0 .7em}
.article-modal--x .article-subhead:first-child{margin-top:0}
.article-modal--x .article-subhead:not(:first-child)::before{content:"◆ ◆ ◆";display:block;text-align:center;font-size:.6rem;letter-spacing:.9em;color:rgba(34,211,238,.6);margin:0 0 2.2em;padding-bottom:0}
.article-modal--x .modal-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:600px){
  #articles .article{padding:0 18px 18px}
  #articles .article::before{margin:0 -18px 18px;height:92px}
  .article-modal--x .modal-hero,.article-modal--x .modal-body{padding-left:20px;padding-right:20px}
  .article-modal--x .modal-body{font-size:1.06rem;line-height:1.74}
}
#articles .article-subhead,.article-modal--x .modal-body .article-subhead{font-weight:700}
/* X cover banners */
#articles .article:has(.article-cover)::before{display:none}
#articles .article-cover{display:block;width:calc(100% + 52px);max-width:none;margin:0 -26px 20px;aspect-ratio:5/2;height:auto;object-fit:cover;border-bottom:1px solid rgba(34,211,238,.25);transition:filter .25s}
#articles .article:hover .article-cover{filter:brightness(1.1)}
#articles .article::before{height:auto;aspect-ratio:5/2}
.article-modal--x .modal-cover{max-width:calc(66ch + 48px);margin:24px auto 0;padding:0 24px;box-sizing:content-box}
.article-modal--x .modal-cover img{display:block;width:100%;aspect-ratio:5/2;object-fit:cover;border-radius:14px;border:1px solid rgba(34,211,238,.2)}
@media (max-width:600px){
  #articles .article-cover{width:calc(100% + 36px);margin:0 -18px 18px}
  #articles .article::before{height:auto}
  .article-modal--x .modal-cover{padding:0 14px;margin-top:14px}
}
/* drop cap skips a standalone bold opening line and goes on the next paragraph */
.article-modal--x .modal-body > p:first-of-type:has(> strong:only-child)::first-letter{float:none;font:inherit;color:inherit;padding:0;line-height:inherit}
.article-modal--x .modal-body > p:first-of-type:has(> strong:only-child) + p::first-letter{float:left;font-family:'Source Serif 4',Georgia,serif;font-weight:700;font-size:3.6em;line-height:.82;padding:.08em .12em 0 0;color:var(--accent)}

/* Mobile section nav */
.mnav-btn{display:none}
.mnav-menu{display:none}
#principles,#sleeves,#tracker,#rules,#articles,#benchmarks{scroll-margin-top:84px}
@media (max-width:640px){
  .mnav-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:44px;height:44px;margin-left:8px;padding:0;background:transparent;border:1px solid var(--border);border-radius:10px;color:var(--text);cursor:pointer}
  .mnav-btn:hover{border-color:var(--accent)}
  .mnav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .mnav-bars{display:flex;flex-direction:column;gap:4px;width:18px}
  .mnav-bars span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
  .mnav-btn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
  .mnav-btn[aria-expanded="true"] .mnav-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .mnav-btn[aria-expanded="true"] .mnav-bars span:nth-child(2){opacity:0}
  .mnav-btn[aria-expanded="true"] .mnav-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .mnav-menu{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;padding:8px 16px 14px;background:rgba(7,11,24,0.97);border-bottom:1px solid var(--border);box-shadow:0 12px 30px rgba(0,0,0,.45)}
  .mnav-menu[hidden]{display:none}
  .mnav-menu a{display:flex;align-items:center;min-height:48px;padding:0 8px;color:var(--muted);font-weight:500;font-size:1rem;border-bottom:1px solid var(--border);border-radius:6px}
  .mnav-menu a:last-child{border-bottom:0}
  .mnav-menu a:hover,.mnav-menu a:focus-visible{color:var(--accent);background:rgba(34,211,238,.06)}
  .mnav-menu a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .hdr-tick{margin-left:auto}
}

/* Sticky mini-nav (mobile; lives inside the sticky header so there is one sticky bar) */
.mininav{display:none}
.header nav a.is-active{color:var(--accent)}
.mnav-menu a.is-active{color:var(--accent)}
@media (max-width:640px){
  .mininav{display:flex;gap:6px;align-items:center;height:38px;padding:0 12px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-top:1px solid var(--border)}
  .mininav::-webkit-scrollbar{display:none}
  .mininav a{flex:0 0 auto;padding:4px 11px;border-radius:999px;font-size:.8rem;font-weight:500;color:var(--muted);border:1px solid var(--border);line-height:1.2}
  .mininav a:hover{color:var(--text)}
  .mininav a.is-active{color:#041018;background:var(--accent);border-color:var(--accent)}
  .mininav a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
  #principles,#sleeves,#tracker,#rules,#articles,#benchmarks{scroll-margin-top:122px}
}