/* ===================================================================
   The Governance Broadsheet — shared design system
   Used by /index.html, /markets/, /markets/?id=N
   =================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=JetBrains+Mono:wght@300;400;500;700&display=swap");

:root{
  --paper:        #efe8d2;
  --paper-deep:   #e5dcbf;
  --paper-cream:  #f6f0d9;
  --ink:          #1a1611;
  --ink-soft:     #3a322a;
  --ink-faded:    #6c5e4d;
  --rule:         #1a1611;
  --vermillion:   #b13a25;
  --vermillion-d: #802818;
  --gilt:         #8a6a2e;
  --olive:        #4a4d28;
  --gain:         #2f5b34;
  --bid:          #2f5b34;
  --ask:          #b13a25;

  --serif-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --serif-body:    "Newsreader", "Iowan Old Style", "Times New Roman", serif;
  --mono:          "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{ box-sizing:border-box; margin:0; padding:0 }
html,body{ background:var(--paper); color:var(--ink); }
body{
  font-family:var(--serif-body);
  font-size:16px; line-height:1.55;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.10  0 0 0 0 0.085  0 0 0 0 0.07  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"),
    radial-gradient(ellipse at 12% 10%, rgba(199,165,103,.18), transparent 55%),
    radial-gradient(ellipse at 90% 110%, rgba(120, 70, 40,.10), transparent 60%),
    var(--paper);
  background-blend-mode:multiply,normal,normal,normal;
}
::selection{ background:var(--vermillion); color:var(--paper-cream); }
a{ color:inherit; text-decoration:none; }

/* ---- container ---------------------------------------------------- */
.sheet{
  max-width:1320px;
  margin:0 auto;
  padding:36px 48px 72px;
  position:relative;
}
.sheet::before,.sheet::after{
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:linear-gradient(to bottom, transparent, var(--ink-faded) 6%, var(--ink-faded) 94%, transparent);
  opacity:.45;
}
.sheet::before{ left:24px; } .sheet::after{ right:24px; }

/* ---- topbar (compact masthead for inner pages) -------------------- */
.topbar{
  border-top:5px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding:12px 0 10px;
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
  position:relative;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:var(--ink);
}
.topbar .brand{
  font-family:var(--serif-display);
  font-variation-settings:"opsz" 60, "wght" 720, "SOFT" 30, "WONK" 1;
  font-size: 36px; line-height:.9; letter-spacing:-.018em;
}
.topbar .brand a{ display:inline-flex; align-items:baseline; gap:10px }
.topbar .brand .sm{
  font-family:var(--serif-display); font-style:italic;
  font-variation-settings:"opsz" 14, "wght" 460;
  font-size:14px; color:var(--ink-faded);
}
.topbar nav{
  font-family:var(--mono);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; gap:24px;
}
.topbar nav a{ position:relative; padding-bottom:2px; }
.topbar nav a:hover{ color:var(--vermillion-d) }
.topbar nav a.is-active{
  color:var(--vermillion);
  border-bottom:1px solid var(--vermillion);
}
.topbar .meta{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-faded); text-align:right;
}

/* ---- typography utilities ----------------------------------------- */
.kicker{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.32em; text-transform:uppercase;
  color:var(--vermillion);
  border-bottom:1px solid var(--vermillion);
  padding-bottom:6px;
  display:inline-block;
}
.kicker.ink{ color:var(--ink); border-color:var(--ink) }
.deck{
  font-family:var(--serif-display);
  font-style:italic;
  font-variation-settings:"opsz" 24, "wght" 400, "SOFT" 80;
  font-size:19px; line-height:1.35;
  color:var(--ink-soft);
}
.smallcaps{ font-variant-caps: all-small-caps; letter-spacing:.08em; color:var(--ink-soft); }
.h-section{
  font-family:var(--serif-display);
  font-variation-settings:"opsz" 96, "wght" 660, "SOFT" 30;
  font-size: clamp(34px, 4vw, 52px);
  line-height:.95; letter-spacing:-.012em;
}
.h-section em{
  font-style:italic; color:var(--vermillion-d);
  font-variation-settings:"opsz" 96, "wght" 460;
}
.eyebrow{
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-faded);
}

/* ---- ornament ----------------------------------------------------- */
.fleuron{ display:flex; justify-content:center; align-items:center; gap:14px; margin: 28px 0; }
.fleuron::before, .fleuron::after{
  content:""; flex:0 0 80px; height:1px; background:var(--ink-faded);
}
.fleuron svg{ display:block; }

/* ---- plate (framed figure) ---------------------------------------- */
.plate{
  border:1px solid var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(180,150,100,.20) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(180,150,100,.20) 39px 40px),
    var(--paper-cream);
  padding:18px;
  position:relative;
}
.plate::before{
  content:""; position:absolute; inset:5px;
  border:1px solid var(--ink-faded); pointer-events:none;
}
.plate-cap{
  font-family:var(--mono);
  font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft);
  display:flex; justify-content:space-between; align-items:center;
  border-bottom:1px solid var(--ink-faded);
  padding-bottom:8px; margin-bottom:14px;
  gap:14px;
}
.plate-cap b{ color:var(--vermillion); font-weight:600 }

/* ---- card --------------------------------------------------------- */
.card{
  border:1px solid var(--ink);
  background:rgba(255,253,243,.55);
  padding:18px;
  position:relative;
}
.card .corner{ position:absolute; width:9px; height:9px; border:1px solid var(--ink); background:var(--paper-cream); }
.card .corner.tl{ top:-5px; left:-5px } .card .corner.tr{ top:-5px; right:-5px }
.card .corner.bl{ bottom:-5px; left:-5px } .card .corner.br{ bottom:-5px; right:-5px }
.card h3{
  font-family:var(--serif-display);
  font-variation-settings:"opsz" 24, "wght" 620;
  font-size:20px; line-height:1.05;
  border-bottom:1px solid var(--ink); padding-bottom:8px; margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:baseline;
}
.card h3 .roman{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  color:var(--ink-faded);
}

/* ---- ledger table ------------------------------------------------- */
table.ledger{
  width:100%; border-collapse:collapse;
  font-family:var(--serif-body); font-size:14.5px;
}
table.ledger thead th{
  border-bottom:1px solid var(--ink);
  padding:8px 8px;
  font-family:var(--mono);
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-soft);
  text-align:left;
}
table.ledger thead th.num,
table.ledger tbody td.num{
  text-align:right; font-family:var(--mono); font-feature-settings:"tnum";
}
table.ledger tbody td{
  padding:9px 8px;
  border-bottom:1px dotted var(--ink-faded);
  vertical-align:middle;
}
table.ledger tbody tr:last-child td{ border-bottom:1px solid var(--ink); }
table.ledger tbody tr.row-link{ cursor:pointer; }
table.ledger tbody tr.row-link:hover{ background:rgba(176,58,37,.08); }
table.ledger .name{
  font-family:var(--serif-display);
  font-variation-settings:"opsz" 18, "wght" 540;
  font-size:17px;
}
table.ledger .name .ticker{
  font-family:var(--mono); font-size:10.5px; color:var(--ink-faded);
  letter-spacing:.18em; margin-left:6px;
}
.gain{ color:var(--gain) } .loss{ color:var(--vermillion-d) }

/* ---- status pip --------------------------------------------------- */
.status-pip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:500;
  color:var(--ink-soft);
}
.status-pip::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--ink-faded);
  box-shadow: 0 0 0 1px var(--paper);
}
.status-pip.s-pending::before{   background:var(--gilt); }
.status-pip.s-voting_and_trading::before{ background:var(--vermillion); animation: pulse 1.6s ease-in-out infinite; }
.status-pip.s-trading_only::before{ background:var(--olive); animation: pulse 2.4s ease-in-out infinite; }
.status-pip.s-settling::before{  background:var(--gilt); animation: pulse 1.2s ease-in-out infinite; }
.status-pip.s-completed::before{ background:var(--ink-faded); }

.status-pip.s-voting_and_trading{ color:var(--vermillion-d) }
.status-pip.s-trading_only{ color:var(--olive) }
.status-pip.s-settling{ color:var(--gilt) }
.status-pip.s-completed{ color:var(--ink-faded) }

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 1px var(--paper), 0 0 0 0 currentColor; }
  50%    { box-shadow:0 0 0 1px var(--paper), 0 0 0 4px rgba(176,58,37,.10); }
}

/* ---- tabs --------------------------------------------------------- */
.tabs{
  border-bottom:1px solid var(--ink);
  display:flex; gap:0; align-items:flex-end;
  margin-bottom:18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.tabs button{
  background:none; border:none; cursor:pointer;
  padding:10px 16px;
  color:var(--ink-faded);
  border-bottom:2px solid transparent;
  font: inherit; letter-spacing:.22em; text-transform:uppercase;
  position:relative;
  transition: color .12s ease, border-color .12s ease;
}
.tabs button:hover{ color:var(--ink) }
.tabs button.is-active{
  color:var(--vermillion);
  border-bottom-color:var(--vermillion);
}
.tabs button .count{
  font-family:var(--serif-display); font-style:italic;
  font-variation-settings:"opsz" 14, "wght" 540;
  font-size:13px; letter-spacing:0;
  color:var(--ink-faded);
  margin-left:8px;
}
.tabs button.is-active .count{ color:var(--vermillion-d); }

/* ---- empty state -------------------------------------------------- */
.empty{
  border:1px dashed var(--ink-faded);
  padding:48px 32px;
  text-align:center;
  background:rgba(255,253,243,.4);
}
.empty .ornament{ margin-bottom:14px }
.empty h4{
  font-family:var(--serif-display);
  font-variation-settings:"opsz" 36, "wght" 620;
  font-size: 28px; line-height:1.05; letter-spacing:-.005em;
  margin-bottom:8px;
}
.empty p{
  font-family:var(--serif-display); font-style:italic;
  font-variation-settings:"opsz" 18, "wght" 420;
  font-size:17px; color:var(--ink-faded);
  max-width:42ch; margin:0 auto;
}

/* ---- buttons / chips --------------------------------------------- */
.chip-row{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--ink-faded);
  padding:5px 10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
  background:transparent; cursor:pointer;
  transition: background .1s ease, border-color .1s ease, color .1s ease;
}
.chip:hover{ background:rgba(176,58,37,.06); border-color:var(--ink); color:var(--ink); }
.chip.is-active{
  background:var(--ink); color:var(--paper-cream); border-color:var(--ink);
}

/* ---- spinner ------------------------------------------------------ */
.spinner{
  display:inline-block; width:14px; height:14px;
  border:2px solid var(--ink-faded);
  border-top-color:var(--vermillion);
  border-radius:50%;
  animation: spin .8s linear infinite;
  vertical-align:middle;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ---- entrance staggers ------------------------------------------- */
.rise{ opacity:0; transform:translateY(10px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:none } }
.rise.d1{ animation-delay:.10s } .rise.d2{ animation-delay:.20s }
.rise.d3{ animation-delay:.30s } .rise.d4{ animation-delay:.42s }
.rise.d5{ animation-delay:.55s }

/* ---- footer / colophon ------------------------------------------- */
footer.colophon{
  margin-top:54px;
  border-top:5px solid var(--ink);
  padding-top:14px;
  display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap:32px;
  font-family:var(--mono);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft);
}
footer h5{
  font-family:var(--serif-display); font-style:italic;
  font-variation-settings:"opsz" 18, "wght" 540;
  text-transform:none; letter-spacing:0;
  font-size:17px; color:var(--ink);
  margin-bottom:6px;
}
footer p{
  font-family:var(--serif-body);
  text-transform:none; letter-spacing:0;
  font-size:13.5px; line-height:1.55;
  color:var(--ink-soft);
}
footer a{ border-bottom:1px solid var(--ink-faded) }
footer a:hover{ color:var(--vermillion-d); border-color:var(--vermillion-d) }
.colophon-rule{
  grid-column: 1 / -1;
  margin-top:14px; padding-top:8px; border-top:1px solid var(--ink-faded);
  display:flex; justify-content:space-between; gap:24px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--ink-faded);
}

/* ---- responsive --------------------------------------------------- */
@media (max-width: 980px){
  .sheet{ padding:22px 16px 56px }
  .sheet::before,.sheet::after{ display:none }
  .topbar{ flex-wrap:wrap; gap:12px }
  .topbar nav{ order:3; flex-basis:100%; gap:18px; flex-wrap:wrap }
  .topbar .meta{ display:none }
  footer.colophon{ grid-template-columns: 1fr }
  table.ledger{ font-size:13px }
  table.ledger thead th, table.ledger tbody td{ padding:6px 5px }
  .h-section{ font-size:30px }
}