/* house.css — the shared design system.
 *
 * Everything here is lifted off the artwork rather than invented to sit
 * alongside it: the paper ground, the ink, the double plate frame, the badge
 * chip knocked off square, cut rules instead of straight ones, and the five
 * class colours as the only accents anywhere in the palette.
 *
 * Light is the default because that is what the traders are printed on. Dark is
 * the noir edition of the same plate. Every page loads this first, then its own
 * sheet for whatever is genuinely page-specific.
 */

:root{
  --paper:#F2EFE6; --ink:#15140F; --ink-soft:#5a564a; --rule:#15140F;
  --plate:#FBF7EF; --grain:rgba(21,20,15,.045); --sunk:#E8E2D4;
  --paper-hands:#8C959A; --after-hours:#3AA6DE; --whale:#7A4CE0;
  --market-maker:#D9911A; --insider:#D2483F;
  --good:#1F7A4C; --bad:#D2483F; --warn:#B87A0E;
  --accent:var(--insider);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
:root[data-theme="dark"]{
  --paper:#14140F; --ink:#F2EFE6; --ink-soft:#9a9587; --rule:#F2EFE6;
  --plate:#1E1D16; --grain:rgba(242,239,230,.05); --sunk:#0D0D09;
  --paper-hands:#9AA3A7; --after-hours:#57C7FF; --whale:#8A5CFF;
  --market-maker:#FFB020; --insider:#FF4B4B;
  --good:#2CE690; --bad:#FF4B4B; --warn:#FFB020;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14140F; --ink:#F2EFE6; --ink-soft:#9a9587; --rule:#F2EFE6;
    --plate:#1E1D16; --grain:rgba(242,239,230,.05); --sunk:#0D0D09;
    --paper-hands:#9AA3A7; --after-hours:#57C7FF; --whale:#8A5CFF;
    --market-maker:#FFB020; --insider:#FF4B4B;
    --good:#2CE690; --bad:#FF4B4B; --warn:#FFB020;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--mono);line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(38deg,var(--grain) 0 1px,transparent 1px 9px)}
::selection{background:var(--ink);color:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}

/* ---- chrome ---- */
.bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px clamp(14px,4vw,40px);border-bottom:3px solid var(--rule)}
.wordmark{font-weight:800;letter-spacing:-.02em;font-size:15px;text-decoration:none;white-space:nowrap}
.wordmark span{color:var(--accent)}
.bar nav{display:flex;gap:14px;font-size:11px;letter-spacing:.12em;flex-wrap:wrap}
.bar nav a{text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}
.bar nav a:hover{border-bottom-color:var(--accent)}
.bar nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.bar-right{display:flex;gap:7px;align-items:center;flex-wrap:wrap}

/* ---- pieces ---- */
.chip{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;font-weight:700;
  background:transparent;border:2px solid var(--ink);color:var(--ink);padding:8px 11px;
  cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap}
.chip.solid{background:var(--ink);color:var(--paper)}
.chip:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.chip:disabled{opacity:.35;cursor:not-allowed}

.btn{font-family:var(--mono);font-size:12px;letter-spacing:.14em;font-weight:800;
  border:2px solid var(--ink);color:var(--ink);background:transparent;padding:14px 20px;
  text-decoration:none;display:inline-block;cursor:pointer;white-space:nowrap}
.btn.solid{background:var(--ink);color:var(--paper)}
.btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{font-size:14px;padding:17px 28px}

.stamp{display:inline-block;font-size:10px;letter-spacing:.26em;font-weight:700;
  border:2px solid var(--ink);padding:4px 9px;margin-bottom:18px}

/* a cut rule, not a straight one — the edge of a trimmed plate */
.rule{height:6px;background:var(--rule);
  clip-path:polygon(0 0,14% 40%,29% 0,46% 45%,61% 5%,78% 40%,90% 0,100% 35%,100% 100%,0 100%)}

/* the double frame from the artwork */
.plate{position:relative;border:3px solid var(--ink);padding:9px;background:var(--plate)}
.plate::after{content:"";position:absolute;inset:9px;border:13px solid var(--ink);pointer-events:none}
.plate img{position:relative;z-index:1}
.badge-chip{display:inline-block;background:var(--plate);border:3px solid var(--ink);
  padding:5px 11px;font-size:11px;font-weight:800;letter-spacing:.12em;transform:rotate(-4deg)}

h1,h2,h3{letter-spacing:-.03em;font-weight:800;line-height:1}
.cls{font-size:9px;letter-spacing:.12em;font-weight:800;border:2px solid currentColor;
  padding:2px 6px;white-space:nowrap}
.c-PAPER_HANDS{color:var(--paper-hands)}
.c-AFTER_HOURS_TRADER{color:var(--after-hours)}
.c-WHALE{color:var(--whale)}
.c-MARKET_MAKER{color:var(--market-maker)}
.c-INSIDER{color:var(--insider)}

.good{color:var(--good)} .bad{color:var(--bad)} .warn-t{color:var(--warn)}
.muted{color:var(--ink-soft)}

/* ---- footer ---- */
.foot{border-top:3px solid var(--rule);margin-top:44px;padding:32px clamp(14px,4vw,40px) 56px;
  max-width:1180px;margin-left:auto;margin-right:auto;display:grid;
  grid-template-columns:1.4fr 1fr;gap:24px}
.foot b{font-weight:800}
.foot p{font-size:12.5px;color:var(--ink-soft);margin-top:8px;max-width:52ch}
.foot-nav{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.foot-nav a{text-decoration:none;border-bottom:1px solid transparent;width:fit-content}
.foot-nav a:hover{border-bottom-color:var(--accent);color:var(--accent)}
.disclaimer{grid-column:1/-1;font-size:11px;color:var(--ink-soft);border-top:2px solid var(--ink);
  padding-top:14px}
@media (max-width:800px){ .foot{grid-template-columns:1fr} }