/* earns.in — the board. One committed visual world: a green felt table, cream title-deed cards with a colour band per
   category (the property sets of a board game), a banknote for the bank. Figures in a mono face with tabular digits,
   deed names in a condensed caps face, running text in Barlow. Colours are explicit everywhere: no theme switching. */
:root{
  --felt:#0b3b2e;--felt-2:#0e4a39;--felt-line:rgba(255,255,255,.14);--cream:#f6f1e3;--cream-2:#ebe3cf;--ink:#1a1710;--ink-2:#4b4536;--muted:#7b735f;
  --rule:#d9cfb6;--red:#c62828;--green:#1f8a4c;--gold:#e9c04a;--link:#0d5c9c;--on-felt:#f1ead6;--on-felt-2:#b9cfc2;
  --cond:"Barlow Condensed","Arial Narrow",Impact,sans-serif;--sans:"Barlow","Helvetica Neue",Arial,sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --band:#1c1a16;--band-ink:#fff;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--felt) radial-gradient(ellipse at 50% -10%,rgba(255,255,255,.10),transparent 55%);color:var(--on-felt);font-family:var(--sans);font-size:17px;line-height:1.5}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
/* masthead */
.mast{border-bottom:1px solid var(--felt-line);background:rgba(0,0,0,.18)}
.mast-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px}
.brand{display:inline-flex;align-items:baseline;gap:4px;text-decoration:none}
.brand-box{font:800 22px/1 var(--cond);letter-spacing:.04em;color:#fff;background:var(--red);padding:7px 10px 6px;border:2px solid #fff;border-radius:3px;box-shadow:0 2px 0 #7a1414}
.brand-tld{font:600 20px var(--cond);color:var(--on-felt-2)}
.nav{display:flex;gap:18px;font:600 14px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.nav a{color:var(--on-felt);text-decoration:none;border-bottom:2px solid transparent;padding-bottom:2px}.nav a:hover{border-bottom-color:var(--gold)}
/* the bank: a banknote and four counters */
.bank{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:stretch;padding:28px 0 8px}
.note{background:linear-gradient(135deg,#d9e6cf,#c4d8bd);border-radius:10px;padding:10px;box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 0 0 1px rgba(0,0,0,.08);color:#163523;position:relative;overflow:hidden}
.note::before{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 18% 50%,rgba(22,53,35,.12) 0 1px,transparent 1px 7px),repeating-radial-gradient(circle at 82% 50%,rgba(22,53,35,.12) 0 1px,transparent 1px 7px);pointer-events:none}
.note-inner{position:relative;border:2px solid rgba(22,53,35,.55);border-radius:6px;padding:14px 18px;min-height:230px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.note-top,.note-bottom{display:flex;justify-content:space-between;gap:12px;font:600 12px var(--cond);letter-spacing:.14em;text-transform:uppercase}
.serial{font:700 12px var(--mono);letter-spacing:.06em}
.note-mid{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center}
.note-amount{display:flex;flex-direction:column;align-items:center;padding:6px 18px;border:2px solid rgba(22,53,35,.55);border-radius:50%/40%;min-width:190px}
.rupee{font:700 56px/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.words{font:800 14px var(--cond);letter-spacing:.16em;text-transform:uppercase;margin-top:6px}
.note-promise{margin:0;font-size:15px;line-height:1.45;color:#1d3f2c;max-width:40ch}
.counters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.counters li{background:rgba(0,0,0,.22);border:1px solid var(--felt-line);border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.counters b{font:700 30px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:#fff}
.counters b small{font-size:16px;color:var(--on-felt-2);font-weight:500}
.counters span{font:800 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.counters i{font-style:normal;font-size:12px;color:var(--on-felt-2)}
/* the board */
.board-head{padding:22px 0 6px}
h1{font:800 clamp(34px,5vw,56px)/1 var(--cond);letter-spacing:.02em;text-transform:uppercase;margin:0 0 8px;color:#fff;text-wrap:balance}
.lede{font-size:17px;line-height:1.5;color:var(--on-felt-2);max-width:66ch;margin:0 0 16px}
.controls{display:flex;flex-direction:column;gap:10px;padding:6px 0 18px;border-top:1px solid var(--felt-line);border-bottom:1px solid var(--felt-line);margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px}
.chip{display:inline-flex;align-items:center;gap:7px;font:600 14px var(--cond);letter-spacing:.04em;text-transform:uppercase;color:var(--on-felt);background:rgba(0,0,0,.25);border:1px solid var(--felt-line);border-radius:999px;padding:5px 11px 5px 7px;cursor:pointer}
.chip i{width:14px;height:14px;border-radius:3px;background:var(--band);border:1px solid rgba(255,255,255,.35)}
.chip.all i{background:linear-gradient(90deg,#d62828,#f2c230,#1f8a4c,#1d4ed8)}.chip.down i{background:#333;border-style:dashed}
.chip b{font-family:var(--mono);font-weight:500;font-size:12px;color:var(--on-felt-2)}
.chip.on{background:var(--cream);color:var(--ink);border-color:var(--cream)}.chip.on b{color:var(--ink-2)}
.sorts{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font:600 13px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--on-felt-2)}
.sorts span{margin-right:4px}
.sorts button{font:inherit;color:var(--on-felt);background:transparent;border:1px solid var(--felt-line);border-radius:4px;padding:4px 9px;cursor:pointer}
.sorts button.on{background:var(--gold);color:#1a1200;border-color:var(--gold)}
.deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
/* a title deed */
.deed{background:var(--cream);color:var(--ink);border-radius:6px;padding:8px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 10px 24px rgba(0,0,0,.28);display:flex;flex-direction:column;gap:8px;position:relative;transition:transform .18s ease,box-shadow .18s ease;animation:deal .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*18ms)}
.deed:hover{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 1px 0 rgba(0,0,0,.25),0 18px 36px rgba(0,0,0,.38)}
@keyframes deal{from{opacity:0;transform:translateY(18px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.band{background:var(--band);color:var(--band-ink);border:2px solid var(--ink);border-radius:4px;padding:8px 10px 9px;text-align:center;display:flex;flex-direction:column;gap:2px}
.band-eyebrow{font:600 10px var(--cond);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.band-name{font:800 24px/1.05 var(--cond);letter-spacing:.04em;text-transform:uppercase;overflow-wrap:anywhere}
.pic{display:block;border:2px solid var(--ink);border-radius:3px;overflow:hidden;background:var(--cream-2)}
.pic img{display:block;width:100%;height:auto;aspect-ratio:300/188;object-fit:cover}
.nopic{aspect-ratio:300/188;display:flex;align-items:center;justify-content:center;font:600 13px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lines{margin:0;padding:0 4px;display:flex;flex-direction:column}
.lines>div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px dotted var(--rule)}
.lines dt{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.lines dd{margin:0;font:500 14px var(--mono);font-variant-numeric:tabular-nums;text-align:right}
.lines .rent dd{font-weight:700;font-size:16px}
.lines dd small{display:block;font:italic 400 12px var(--sans);color:var(--red)}
.lines em{font-style:italic;color:var(--red);font-family:var(--sans);font-size:13px}
.deed-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:2px 4px 4px}
.dom{font:700 13px var(--mono);color:var(--link);text-decoration:none}.dom:hover{text-decoration:underline}
.stamp{font:800 11px var(--cond);letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border:2px solid currentColor;border-radius:3px;transform:rotate(-3deg)}
.stamp.play{color:var(--green)}.stamp.acting{color:var(--link)}.stamp.idle{color:#8a7f6a}.stamp.mortgaged{color:var(--red);background:rgba(198,40,40,.08)}
.legend{font-size:13px;color:var(--on-felt-2);margin:22px 0 0;max-width:96ch}
.legend b{color:var(--gold);font:800 13px var(--cond);letter-spacing:.1em;text-transform:uppercase}
/* a being's page */
.eyebrow{font:600 12px var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--on-felt-2);margin:26px 0 10px}
.eyebrow a{color:var(--gold);text-decoration:none}
.being-grid{display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px;align-items:start}
.deed-big{animation:none;position:sticky;top:16px}
.deed-big .band-name{font-size:28px}
.capnote{font-size:12px;color:var(--on-felt-2);margin:10px 2px 0;line-height:1.5}
.capnote a{color:var(--gold)}
.h-dom{display:block;font:500 15px var(--mono);letter-spacing:0;text-transform:none;color:var(--on-felt-2);margin-top:6px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border-radius:6px;padding:14px 16px 16px;color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.28);background:var(--cream)}
.card h2{font:800 13px var(--cond);letter-spacing:.2em;text-transform:uppercase;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid currentColor}
.card p{margin:0 0 6px;font-size:14px;line-height:1.5}
.card-big{font:800 22px/1.15 var(--cond);letter-spacing:.01em;margin:0 0 8px!important}
.card.chance{background:#f6c447;color:#3a2600}
.card.chest{background:#7fc8ea;color:#0b2838}
.card.bank{background:#e8f0dc;color:#163523}
.card.houses{background:var(--cream)}
.card.facts{background:#fff}
.card dl{margin:0;padding:0}
.card dl>div{display:flex;flex-direction:column;gap:2px;padding:7px 0;border-bottom:1px dotted rgba(0,0,0,.25);font-size:14px}
.card dt{font:600 11px var(--cond);letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.card dd{margin:0;font-family:var(--mono);font-size:14px;overflow-wrap:anywhere}
.card .amt{font:700 30px/1.1 var(--mono)}
.card em{color:var(--red);font-style:italic;font-family:var(--sans)}
.tables{list-style:none;margin:0 0 8px;padding:0;font-size:14px}
.tables li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px dotted var(--rule)}
.tables b{font:700 13px var(--mono);font-variant-numeric:tabular-nums}
.being .lede{color:var(--on-felt-2)}
/* the rules */
.prose{max-width:76ch;background:var(--cream);color:var(--ink);border-radius:8px;padding:28px 30px 34px;margin-top:26px;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.prose h1{color:var(--ink);font-size:clamp(30px,4vw,44px)}
.prose .lede,.prose .eyebrow{color:var(--ink-2)}
.prose h2{font:800 14px var(--cond);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin:26px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.prose p,.prose li{font-size:16px;line-height:1.6}
.prose ol{padding-left:22px}.prose li{margin:0 0 10px}
.prose a{color:var(--link)}
.facts{margin:0}
.facts>div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:8px 0;border-bottom:1px dotted var(--rule)}
.facts dt{font:600 12px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.facts dd{margin:0;font-size:15px}
/* footer */
.foot{margin:54px auto 40px;padding-top:16px;border-top:1px solid var(--felt-line);font-size:13px;color:var(--on-felt-2)}
.foot a{color:var(--on-felt)}
@media (max-width:980px){.bank{grid-template-columns:1fr}.being-grid{grid-template-columns:1fr}.deed-big{position:static;max-width:330px}}
@media (max-width:480px){
  body{font-size:16px}.mast-row{flex-wrap:wrap;gap:8px}.nav{gap:14px}
  .note-mid{grid-template-columns:1fr;justify-items:center;text-align:center}.rupee{font-size:46px}.counters b{font-size:26px}
  .deck{grid-template-columns:1fr}.cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.deed{animation:none;transition:none}.deed:hover{transform:none}}