/* ============================================================
   FACTOR — Robinhood Chain Working Paper No. 1
   Academic paper + chalkboard. IBM Plex family + Caveat chalk.
   ============================================================ */

:root{
  --paper:      #000000;   /* Robinhood night — true black */
  --paper-deep: #1A1F1C;   /* raised sheet/chip surface */
  --panel:      #14181A;   /* raised well (inputs, figures, frames) */
  --surface:    #313A33;   /* elevated card/overlay surface — clearly visible on black */
  --surface-brd:#55655A;   /* card border */
  --hover:      #161C17;   /* row hover on the black panels */
  --ink:        #EDEFEA;
  --ink-soft:   #B7BDB6;
  --muted:      #8A928A;
  --rule:       #2C332D;   /* visible hairline dividers */
  --rule-dark:  #46534B;   /* clear component borders */
  --slate:      #0D110D;   /* board panel, green-black */
  --slate-deep: #050705;
  --chalk:      #EDEFEA;
  --chalk-dim:  #94A297;
  --blue:       #00C805;   /* Robinhood green — the accent */
  --blue-deep:  #063F08;
  --link:       #00C805;
  --ochre:      #EDEFEA;   /* series B: white, dashed in charts */
  --red:        #FF5000;   /* Robinhood down */
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans:  "IBM Plex Sans", system-ui, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, monospace;
  --hand:  "Caveat", cursive;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; color-scheme: dark; }
body{
  font-family: var(--serif);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  /* night grain */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono{ font-family: var(--mono); }
a{ color: var(--link); }

/* ---------------- top bar ---------------- */
.topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; gap:28px;
  padding: 10px 28px;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule-dark);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); }
.brand-beta{ width:30px; height:30px; display:block; }
.beta-glyph{ font-family: var(--serif); font-style: italic; font-size:24px; fill: #00C805; }
.brand-word{ font-family: var(--serif); font-weight:600; letter-spacing:0.34em; font-size:15px; }
.topnav{ display:flex; gap:20px; margin-left:8px; flex:1; flex-wrap:nowrap; overflow-x:auto; min-width:0; }
.topnav a{
  font-family: var(--sans); font-size:12.5px; letter-spacing:0.06em;
  color: var(--ink-soft); text-decoration:none; padding:4px 2px;
  border-bottom: 2px solid transparent;
}
.topnav a:hover{ color: var(--ink); border-bottom-color: var(--blue); }
.topnav a.nav-term{ color: var(--blue); border: 1px solid rgba(0,200,5,0.4); padding: 4px 10px; }
.topnav a.nav-term:hover{ background: var(--blue); color: #000; border-bottom-color: transparent; }
.obs{ font-size:11px; color: var(--muted); letter-spacing:0.08em; white-space:nowrap; }

/* ---------------- chalkboard hero ---------------- */
.board{
  margin: 26px clamp(14px, 4vw, 48px) 0;
  background:
    radial-gradient(1100px 420px at 18% 8%, rgba(0,200,5,0.07), transparent 60%),
    radial-gradient(700px 300px at 85% 90%, rgba(0,200,5,0.04), transparent 55%),
    linear-gradient(177deg, var(--slate) 0%, var(--slate-deep) 100%);
  border: 1px solid #142016;
  outline: 1px solid var(--rule-dark);
  outline-offset: 5px;
  box-shadow: 0 24px 80px -28px rgba(0,200,5,0.16);
  position: relative;
  overflow: hidden;
}
.board::after{ /* chalk dust */
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.board-inner{
  max-width: 980px; margin: 0 auto;
  padding: clamp(48px, 7vw, 84px) clamp(22px, 5vw, 56px) clamp(40px, 5vw, 64px);
  position: relative; z-index:1;
}
.board-series{
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em;
  color: var(--chalk-dim); margin-bottom: 22px;
}
.board-title{
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.08; color: var(--chalk);
  text-wrap: balance;
}
.board-authors{
  margin-top: 18px;
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.18em;
  color: var(--chalk-dim);
}
.fn a{ color: var(--chalk-dim); text-decoration: none; }
.paper-sec .fn a{ color: var(--muted); }

.chalk-eq{ margin: 34px 0 8px; position: relative; width: fit-content; }
.chalk{
  font-family: var(--hand); font-size: clamp(26px, 3.4vw, 36px);
  color: #00C805; transform: rotate(-1.3deg); display:inline-block;
  text-shadow: 0 0 12px rgba(0,200,5,0.45);
}
.chalk-underline{ display:block; width: min(260px, 60vw); height:12px; margin-top:-2px; }
.chalk-note{
  display:block; font-family: var(--hand); font-size: 19px;
  color: var(--chalk-dim); transform: rotate(0.8deg); margin-top: 2px;
}

.abstract{
  margin-top: 36px; max-width: 640px;
  border-left: 2px solid rgba(0,200,5,0.55);
  padding-left: 20px;
}
.abstract-label{
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.3em;
  color: var(--chalk-dim); display:block; margin-bottom: 8px;
}
.abstract p{ color: #CBD3D9; font-size: 15.5px; line-height: 1.65; }
.abstract em{ color: var(--chalk); }

.board-stats{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: rgba(0,200,5,0.18);
  border: 1px solid rgba(0,200,5,0.18);
  margin-top: 40px;
}
.bstat{ background: rgba(3,6,3,0.92); padding: 14px 16px 12px; }
.bstat-k{ display:block; font-size: 21px; color: var(--chalk); }
.bstat-k.pos{ color:#00C805; } .bstat-k.neg{ color:#FF5000; }
.bstat-l{ font-family: var(--sans); font-size: 11px; letter-spacing: 0.08em; color: var(--chalk-dim); text-transform: uppercase; }

.board-cta{ margin-top: 34px; display:flex; gap: 14px; flex-wrap: wrap; }
.btn{
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  text-decoration: none; padding: 11px 22px; transition: all .18s ease;
}
.btn-chalk{ background: #00C805; color: #000; font-weight: 600; }
.btn-chalk:hover{ background:#2EDB33; transform: translateY(-1px); box-shadow: 0 6px 22px -6px rgba(0,200,5,0.55); }
.btn-ghost{ color: #00C805; border: 1px solid rgba(0,200,5,0.45); }
.btn-ghost:hover{ border-color: #00C805; background: rgba(0,200,5,0.08); }

/* staggered reveal */
.reveal{ opacity:0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.3,1) forwards; }
.r1{animation-delay:.05s} .r2{animation-delay:.15s} .r3{animation-delay:.28s}
.r4{animation-delay:.44s} .r5{animation-delay:.58s} .r6{animation-delay:.72s} .r7{animation-delay:.86s} .r8{animation-delay:1s}
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; opacity:1; transform:none; }
  .score-table tbody tr, .sheet{ animation: none !important; }
}

/* ---------------- paper sections ---------------- */
.paper-sec{
  max-width: 1120px; margin: 0 auto;
  padding: clamp(56px, 8vw, 96px) clamp(16px, 4vw, 40px) 0;
}
.sec-head{ max-width: 760px; }
.sec-head h2{
  font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 36px);
  display:flex; align-items:baseline; gap: 18px;
  border-top: 3px double var(--rule-dark);
  padding-top: 26px;
}
.sec-no{
  font-family: var(--mono); font-size: 0.62em; color: var(--blue);
  border: 1px solid var(--rule-dark); padding: 2px 9px; transform: translateY(-4px);
  background: var(--paper-deep);
}
.sec-sub{ margin-top: 12px; color: var(--ink-soft); font-size: 15.5px; max-width: 640px; }

/* ---------------- toolbar ---------------- */
.toolrow{
  display:flex; align-items:center; gap: 16px; flex-wrap: wrap;
  margin: 26px 0 0; padding: 12px 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.search{
  font-size: 13px; padding: 8px 12px; width: 280px; max-width: 100%;
  border: 1px solid var(--rule-dark); background: var(--panel); color: var(--ink);
}
.search:focus{ outline: 2px solid var(--blue); outline-offset: -1px; }
.sortchips{ display:flex; gap: 6px; flex-wrap: wrap; }
.chip{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  padding: 6px 12px; background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule-dark); cursor: pointer; transition: all .15s;
}
.chip:hover{ border-color: var(--ink); color: var(--ink); }
.chip.active{ background: var(--blue); color: #000; border-color: var(--blue); font-weight: 600; }
.toolnote{ font-size: 11px; color: var(--muted); margin-left:auto; letter-spacing:0.06em; }

/* ---------------- scoreboard table ---------------- */
.tablewrap{ overflow-x: auto; margin-top: 0; }
.score-table{ width: 100%; border-collapse: collapse; min-width: 940px; }
.score-table thead th{
  font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--muted); text-align: right; padding: 12px 10px 8px;
  border-bottom: 2px solid var(--ink); white-space: nowrap;
  position: sticky; top: 51px; background: var(--paper); z-index: 5;
}
.score-table thead th.th-name{ text-align:left; }
.score-table thead th.th-rank{ text-align:right; width: 34px; }
.score-table tbody td{
  padding: 8px 10px; border-bottom: 1px solid var(--rule);
  text-align: right; font-size: 13.5px; white-space: nowrap;
}
.score-table tbody tr{ cursor: pointer; transition: background .12s; animation: rowin .4s ease both; }
.score-table tbody tr:hover{ background: var(--hover); }
@keyframes rowin{ from{ opacity:0; } to{ opacity:1; } }
.td-rank{ color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.td-name{ text-align: left !important; }
.tk{ font-family: var(--mono); font-weight: 500; font-size: 13px; }
.tk-prefix{ color: var(--muted); font-weight: 400; }
.nm{ font-family: var(--sans); color: var(--muted); font-size: 11.5px; margin-left: 8px; }
.sec-tag{ font-family: var(--mono); font-size: 9.5px; color: var(--muted); border:1px solid var(--rule); padding: 1px 5px; margin-left:8px; letter-spacing:0.05em; }
.td-mono{ font-family: var(--mono); font-size: 12.5px; }
.pos{ color: var(--blue); } .neg{ color: var(--red); }
.td-comp{ font-family: var(--mono); font-weight: 500; }
.scorebar{ display:inline-flex; align-items:center; gap: 7px; }
.scorebar-track{ width: 52px; height: 5px; background: #2A312B; display:inline-block; border-radius: 2px; overflow:hidden; }
.scorebar-fill{ display:block; height:100%; border-radius:2px; }
.scorebar-num{ font-size: 11.5px; width: 20px; text-align:right; color: var(--ink-soft); }

/* trade links & CA */
.td-trade{ text-align: center !important; }
.trade-a{
  color: var(--blue); text-decoration: none; font-family: var(--mono); font-size: 14px;
  border: 1px solid rgba(0,200,5,0.4); padding: 2px 9px; transition: all .15s;
}
.trade-a:hover{ background: var(--blue); color: #000; }
.no-ca{ color: var(--muted); cursor: help; }
.sheet-ca{
  margin-top: 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid rgba(0,200,5,0.35); background: rgba(0,200,5,0.05); padding: 12px 16px;
}
.sheet-ca.none{
  border-color: var(--rule-dark); background: var(--panel); color: var(--muted);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6;
}
.ver-chip{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--blue); white-space: nowrap; }
.ca-code{
  font-family: var(--mono); font-size: 12.5px; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; padding: 0;
}
.ca-code:hover{ color: var(--ink); text-decoration: underline dotted; }
.btn-trade{
  margin-left: auto; font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  background: var(--blue); color: #000; padding: 8px 16px; text-decoration: none; transition: background .15s;
}
.btn-trade:hover{ background: #2EDB33; }
.no-pool-note{ margin-left: auto; font-family: var(--sans); font-size: 11.5px; color: var(--muted); }

.figcap{
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  margin: 14px 0 0; max-width: 640px; line-height: 1.5;
}
.figcap .mono{ font-size: 11px; }
.fig-block{ margin-top: 40px; }
.figframe{
  border: 1px solid var(--rule-dark); background: var(--panel);
  padding: 18px 14px 8px; overflow-x:auto;
}
.figframe svg{ display:block; width: 100%; height:auto; min-width: 560px; }
.figframe-tall{ padding-top: 22px; }
.axis-t{ font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.series-label{ font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); }
.chart-tip{
  position:absolute; pointer-events:none; background: var(--slate); color: var(--chalk);
  border: 1px solid var(--rule-dark);
  font-family: var(--mono); font-size: 11px; padding: 8px 10px; line-height: 1.7;
  box-shadow: 0 8px 24px -8px rgba(27,39,49,0.5); z-index: 10;
}
.tip-d{ display:block; color: var(--chalk-dim); font-size: 10px; letter-spacing: 0.08em; }
.tip-row{ display:flex; align-items:center; gap:6px; }
.tip-row i{ width:8px; height:8px; display:inline-block; border-radius:1px; }
.tip-row b{ font-weight:500; margin-left:auto; padding-left:10px; }
.legend{ display:flex; gap: 22px; flex-wrap:wrap; margin-bottom: 10px; }
.lg{ font-family: var(--sans); font-size: 12px; color: var(--ink-soft); display:flex; align-items:center; gap: 8px; }
.lg i{ width: 14px; height: 3px; display:inline-block; }

/* ---------------- specimens ---------------- */
.specimen-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.specimen{
  font-family: var(--mono); font-size: 12px; padding: 8px 14px;
  border: 1px solid var(--rule-dark); background: var(--panel); cursor: pointer;
  transition: all .15s;
}
.specimen:hover{ border-color: var(--slate); background: var(--paper-deep); transform: translateY(-1px); }
.specimen b{ font-weight: 500; }
.specimen .d{ color: var(--muted); margin-left: 6px; }

/* ---------------- factor sheet modal ---------------- */
.sheet-overlay[hidden]{ display: none; }
.sheet-overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(3px);
  display:flex; align-items:flex-start; justify-content:center;
  padding: 4vh 16px; overflow-y: auto;
}
.sheet{
  background: var(--paper-deep); width: min(760px, 100%);
  border: 1px solid var(--rule-dark); border-top: 2px solid var(--blue);
  outline: 1px solid var(--rule-dark); outline-offset: 4px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.5);
  padding: clamp(24px, 4vw, 44px);
  animation: sheetin .35s cubic-bezier(.2,.7,.3,1);
  position: relative;
}
@keyframes sheetin{ from{ opacity:0; transform: translateY(22px) scale(.985); } }
.sheet-close{
  position:absolute; top: 14px; right: 14px;
  font-family: var(--mono); font-size: 12px; background:none; border:1px solid var(--rule-dark);
  padding: 5px 10px; cursor:pointer; color: var(--ink-soft);
}
.sheet-close:hover{ background: var(--slate); color: var(--chalk); border-color: var(--slate); }
.sheet-series{ font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--muted); padding-right: 110px; }
.sheet-head{ display:flex; align-items:baseline; gap: 16px; flex-wrap:wrap; margin-top: 10px;
  border-bottom: 3px double var(--rule-dark); padding-bottom: 16px; }
.sheet-tk{ font-family: var(--serif); font-size: 42px; font-weight: 500; }
.sheet-tk .tk-prefix{ color: var(--muted); font-size: 0.6em; }
.sheet-nm{ font-family: var(--sans); color: var(--ink-soft); font-size: 14px; }
.sheet-dec{ margin-left:auto; text-align:right; }
.sheet-dec .dl{ font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.12em; color: var(--muted); display:block; }
.sheet-dec .dv{ font-family: var(--serif); font-size: 30px; }
.sheet-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; margin-top: 22px; }
@media (max-width: 620px){ .sheet-grid{ grid-template-columns: 1fr; } }
.sheet-stat{ display:flex; justify-content:space-between; align-items:baseline;
  border-bottom: 1px dotted var(--rule-dark); padding: 7px 0; }
.sheet-stat .k{ font-family: var(--sans); font-size: 12px; color: var(--ink-soft); letter-spacing:0.04em; }
.sheet-stat .v{ font-family: var(--mono); font-size: 13.5px; }
.sheet-factors{ margin-top: 26px; display:grid; gap: 12px; }
.sf-row{ display:grid; grid-template-columns: 56px 1fr 40px; align-items:center; gap: 14px; }
.sf-k{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-soft); }
.sf-track{ height: 9px; background: #2A312B; border-radius: 2px; position:relative; overflow:hidden; }
.sf-fill{ position:absolute; inset: 0 auto 0 0; border-radius: 2px; }
.sf-v{ font-family: var(--mono); font-size: 13px; text-align: right; }
.sheet-spark{ margin-top: 26px; border: 1px solid var(--rule); background: var(--panel); padding: 12px; }
.sheet-figcap{ font-family: var(--sans); font-size: 11px; color: var(--muted); margin-top: 8px; }
.sheet-note{ font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-soft);
  margin-top: 20px; border-left: 2px solid var(--rule-dark); padding-left: 14px; }

/* ---------------- portfolios ---------------- */
.port-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 28px; }
@media (max-width: 760px){ .port-grid{ grid-template-columns: 1fr; } }
.port-meta{ border: 1px solid var(--rule-dark); background: var(--panel); padding: 20px 22px; }
.pm-name{ font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; display:flex; align-items:center; gap:10px; }
.pm-name i{ width: 12px; height: 12px; display:inline-block; border-radius: 2px; }
.pm-stats{ display:flex; gap: 26px; margin-top: 14px; flex-wrap:wrap; }
.pm-stat .v{ font-family: var(--mono); font-size: 19px; display:block; }
.pm-stat .k{ font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.pm-members{ margin-top: 14px; display:flex; flex-wrap: wrap; gap: 6px; }
.pm-chip{ font-family: var(--mono); font-size: 11px; border: 1px solid var(--rule); padding: 3px 8px; color: var(--ink-soft); background: var(--panel); }

.rebal-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
@media (max-width: 760px){ .rebal-grid{ grid-template-columns: 1fr; } }
.rebal-h{ font-size: 11px; letter-spacing: 0.16em; color: var(--ink-soft); border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.rebal{ list-style: none; }
.rebal li{ padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; display:flex; gap: 14px; }
.rebal .d{ font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }

/* ---------------- method ---------------- */
.method .eq-list{ margin-top: 30px; border: 1px solid var(--rule-dark); background: var(--panel); }
.eq-row{
  display:grid; grid-template-columns: 54px 1fr; grid-template-rows:auto auto; gap: 2px 18px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule);
}
.eq-row:last-child{ border-bottom: none; }
.eq-no{ font-family: var(--mono); color: var(--muted); font-size: 12px; grid-row: 1 / 3; padding-top: 4px; }
.eq{ font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: 0.01em; }
.eq sub, .eq sup{ font-size: 0.62em; }
.eq-note{ font-family: var(--sans); font-size: 12px; color: var(--muted); }
.method-notes{ max-width: 680px; margin-top: 30px; display:grid; gap: 14px; font-size: 15px; }
.method-notes .mono{ font-size: 13px; }
.footnotes{ margin-top: 40px; border-top: 1px solid var(--rule-dark); padding-top: 16px; max-width: 680px; }
.footnote{ font-size: 12.5px; color: var(--ink-soft); margin-bottom: 8px; }
.footnote sup{ color: var(--blue); margin-right: 4px; }

/* ---------------- $FCTR ---------------- */
.fctr-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 28px; }
.fctr-card{
  border: 1px solid var(--rule-dark); background: var(--slate); color: var(--chalk);
  padding: 20px; position:relative; overflow:hidden;
}
.fctr-card::after{ content:""; position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fctr-k{ display:block; font-size: 17px; letter-spacing: 0.02em; }
.fctr-l{ font-family: var(--sans); font-size: 11.5px; color: var(--chalk-dim); display:block; margin-top: 6px; line-height:1.5; }
.roadmap{ margin-top: 40px; }
.roadmap-h{ font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-soft);
  border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.road{ list-style: none; }
.road li{ display:flex; align-items:baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; }
.road-q{ font-size: 11.5px; color: var(--muted); white-space:nowrap; }
.road-chip{ font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; padding: 2px 8px; white-space:nowrap; }
.road-chip.live{ background: var(--blue); color: #000; font-weight: 600; }
.road-chip.prog{ background: var(--paper-deep); color: var(--ink-soft); border: 1px solid var(--rule-dark); }
.road-chip.plan{ color: var(--muted); border: 1px dashed var(--rule-dark); }

/* ---------------- Factor ETF ---------------- */
.etf-head{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:28px; padding:20px 22px; border:1px solid var(--rule-dark); background:var(--panel); }
.etf-badge{ display:flex; flex-direction:column; gap:4px; }
.etf-tk{ font-size:26px; letter-spacing:0.04em; color:var(--blue); }
.etf-name{ font-family:var(--sans); font-size:12.5px; color:var(--ink-soft); max-width:340px; }
.etf-stats{ display:flex; gap:26px; margin-left:auto; flex-wrap:wrap; }
.etf-stat .v{ display:block; font-size:19px; }
.etf-stat .v.pos{ color:var(--blue); } .etf-stat .v.neg{ color:var(--red); }
.etf-stat .k{ font-family:var(--sans); font-size:10px; letter-spacing:0.08em; color:var(--muted); text-transform:uppercase; }
.etf-cta{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:16px; }
.etf-cta-note{ font-family:var(--sans); font-size:12.5px; color:var(--muted); }
.etf-holdings{ margin-top:18px; border:1px solid var(--rule); }
.etf-row{ display:grid; grid-template-columns:32px 88px 1fr 46px 96px 84px auto; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--ink); transition:background .12s; }
.etf-row:last-child{ border-bottom:none; }
.etf-row:hover{ background:var(--hover); }
.etf-rank{ color:var(--muted); font-size:11.5px; }
.etf-htk{ font-size:13.5px; font-weight:500; }
.etf-htk .tk-prefix{ color:var(--muted); }
.etf-hnm{ font-family:var(--sans); font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.etf-wt{ font-size:12px; color:var(--ink-soft); text-align:right; }
.etf-hpx{ font-size:12.5px; text-align:right; }
.etf-hsc{ font-size:11px; color:var(--muted); text-align:right; }
.etf-buy{ font-size:11.5px; color:var(--blue); border:1px solid rgba(0,200,5,0.4); padding:3px 11px; justify-self:end; white-space:nowrap; }
.etf-row:hover .etf-buy{ background:var(--blue); color:#000; }
.etf-explain{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin-top:34px; }
.etf-h{ font-family:var(--mono); font-size:11px; letter-spacing:0.16em; color:var(--ink-soft); border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:14px; }
.etf-list{ list-style:none; display:grid; gap:12px; }
.etf-list li{ font-size:14px; color:var(--ink-soft); padding-left:18px; position:relative; line-height:1.5; }
.etf-list li::before{ content:"▸"; position:absolute; left:0; color:var(--blue); }
.etf-list strong, .etf-p strong{ color:var(--ink); }
.etf-p{ font-size:14px; color:var(--ink-soft); line-height:1.65; }
.etf-links{ display:flex; flex-direction:column; gap:8px; margin-top:16px; }
.etf-links a{ font-family:var(--mono); font-size:12px; color:var(--blue); text-decoration:none; }
.etf-links a:hover{ text-decoration:underline; }
@media (max-width:760px){
  .etf-explain{ grid-template-columns:1fr; }
  .etf-row{ grid-template-columns:26px 66px 1fr 64px auto; }
  .etf-hnm, .etf-hsc{ display:none; }
}
/* hero two-column layout: content left, vertical ETF card right */
.board-grid{ display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:clamp(28px,4vw,52px); align-items:start; max-width:1120px; }
.board-main{ min-width:0; }
.board-side{ align-self:start; }
@media (max-width:900px){
  .board-grid{ grid-template-columns:1fr; }
  .board-side{ max-width:520px; }
}

/* vertical ETF showcase card (on the dark chalkboard) */
.etf-hero-card{ display:flex; flex-direction:column; gap:13px; padding:26px 24px;
  border:1px solid var(--blue); background:#000000;
  box-shadow:0 0 34px -16px rgba(0,200,5,0.35); }
.ehc-tag{ font-family:var(--mono); font-size:10px; letter-spacing:0.22em; color:var(--blue); }
.ehc-tk{ font-size:42px; letter-spacing:0.03em; color:var(--blue); line-height:1; }
.ehc-sub{ font-family:var(--sans); font-size:13px; color:var(--chalk-dim); line-height:1.55; }
.ehc-navrow{ display:flex; align-items:baseline; gap:10px; padding:13px 0;
  border-top:1px solid rgba(0,200,5,0.2); border-bottom:1px solid rgba(0,200,5,0.2); }
.ehc-nav-v{ font-size:34px; color:var(--chalk); }
.ehc-nav-v.pos{ color:var(--blue); } .ehc-nav-v.neg{ color:var(--red); }
.ehc-nav-k{ font-size:10px; letter-spacing:0.12em; color:var(--chalk-dim); text-transform:uppercase; }
.ehc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.ehc-chip{ font-size:12.5px; color:var(--chalk); border:1px solid rgba(0,200,5,0.4); background:transparent; padding:3px 9px; }
.ehc-chip .tk-prefix{ color:var(--chalk-dim); }
.ehc-chip.more{ color:var(--chalk-dim); border-style:dashed; }
.ehc-actions{ display:flex; flex-direction:column; gap:10px; margin-top:2px; }
.ehc-actions .btn{ width:100%; text-align:center; font-size:13px; padding:11px 0; }

/* ---------------- footer ---------------- */
.foot{
  margin-top: clamp(60px, 9vw, 110px);
  border-top: 3px double var(--rule-dark);
  padding: 36px clamp(16px, 4vw, 40px) 44px;
  max-width: 1120px; margin-left:auto; margin-right:auto;
}
.foot-row{ display:flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.foot-tag{ font-style: italic; color: var(--ink-soft); font-size: 14px; margin-top: 6px; }
.foot-links{ display:flex; gap: 20px; font-size: 12px; }
.foot-links a{ color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--rule-dark); }
.foot-links a:hover{ color: var(--ink); border-bottom-color: var(--blue); }
.foot-legal{ margin-top: 26px; font-family: var(--sans); font-size: 11.5px; color: var(--muted); max-width: 760px; line-height: 1.6; }

/* ---------------- responsive ---------------- */
@media (max-width: 880px){
  .topnav{ display:none; }
  .obs{ margin-left:auto; }
}