/* MMP Price Watch: ledger / tracker style. Heavy rules, Plex type, signal colours. */
:root {
  --bg: #ffffff;
  --bg-2: #f4f4f1;
  --ink: #0a0a0a;
  --ink-2: #404040;
  --muted: #767676;
  --rule: #0a0a0a;
  --hair: #e3e3df;
  --signal: #ffd60a;
  --down: #c62828;
  --down-tint: #fdeaea;
  --up: #1b7f3b;
  --up-tint: #e6f4ea;
  --neutral-tint: #eef0f6;
  --max: 1180px;
  --sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-underline-offset: 3px; }
img, svg { display: block; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap { padding: 0 16px; } }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; }
h1 { font: 700 clamp(38px, 6vw, 76px)/0.98 var(--sans); letter-spacing: -0.035em; }
h2 { font: 700 clamp(26px, 3.2vw, 38px)/1.08 var(--sans); }
h3 { font: 600 18px/1.3 var(--sans); }
.mono { font-family: var(--mono); }
.label { font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
mark { background: linear-gradient(transparent 55%, var(--signal) 55%); color: inherit; padding: 0 2px; }

/* ticker */
.ticker { background: var(--ink); color: #fff; overflow: hidden; border-bottom: 1px solid var(--ink); font: 500 13px/1 var(--mono); }
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker a { display: flex; align-items: center; gap: 10px; padding: 11px 28px; color: #fff; text-decoration: none; border-right: 1px solid #2a2a2a; white-space: nowrap; }
.ticker a:hover { background: #1a1a1a; }
.ticker .d { color: #9a9a9a; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* nav */
.nav { border-bottom: 3px solid var(--ink); background: var(--bg); position: sticky; top: 0; z-index: 20; }
.nav .wrap { display: flex; align-items: stretch; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font: 700 19px/1 var(--sans); letter-spacing: -0.03em; padding-right: 22px; border-right: 1px solid var(--hair); }
.brand .eye { width: 26px; height: 26px; background: var(--signal); border: 2px solid var(--ink); display: grid; place-items: center; }
.nav-links { display: flex; margin-left: auto; }
.nav-links a { display: flex; align-items: center; padding: 0 18px; font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink-2); border-left: 1px solid var(--hair); }
.nav-links a:hover { background: var(--signal); color: var(--ink); }
.nav .rss { display: flex; align-items: center; gap: 8px; padding: 0 18px; border-left: 1px solid var(--hair); font: 500 13px var(--mono); text-decoration: none; }
.nav .rss:hover { background: var(--signal); }
@media (max-width: 900px) { .nav-links { display: none; } .nav .rss { margin-left: auto; } }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px; font: 600 15px/1 var(--sans); text-decoration: none; border: 2px solid var(--ink); background: var(--ink); color: #fff; cursor: pointer; white-space: nowrap; box-shadow: 4px 4px 0 var(--signal); transition: transform .1s ease, box-shadow .1s ease; }
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--signal); }
.btn.alt { background: var(--bg); color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.alt:hover { box-shadow: 6px 6px 0 var(--ink); }
.btn.sm { padding: 10px 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--signal); }
.ctas { display: flex; gap: 16px; flex-wrap: wrap; }

/* hero */
.hero { padding: 64px 0 56px; border-bottom: 1px solid var(--ink); }
.hero .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; }
.hero .lead { font-size: 20px; color: var(--ink-2); margin: 22px 0 30px; max-width: 600px; }
@media (max-width: 900px) { .hero .grid { grid-template-columns: 1fr; gap: 32px; } }
.page-head { padding: 52px 0 40px; border-bottom: 1px solid var(--ink); }
.page-head .lead { font-size: 19px; color: var(--ink-2); margin-top: 16px; max-width: 720px; }
.page-head h1 { font-size: clamp(34px, 5vw, 60px); margin-top: 14px; }
.crumb { font: 500 13px var(--mono); color: var(--muted); }
.crumb a { color: var(--muted); }

/* latest change card */
.latest { border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--bg); }
.latest-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 2px solid var(--ink); background: var(--signal); font: 600 12.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.latest-body { padding: 20px 20px 18px; display: grid; gap: 12px; }
.latest-body h3 { font-size: 22px; }
.latest-body p { color: var(--ink-2); font-size: 15px; }
.latest-body .row { display: flex; gap: 12px; align-items: center; }
.latest-body .row img { width: 32px; height: 32px; border: 1px solid var(--hair); }
.latest-body a.more { font-weight: 600; font-size: 14.5px; }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 5px 8px; border: 1px solid currentColor; white-space: nowrap; }
.badge.worse { color: var(--down); background: var(--down-tint); }
.badge.better { color: var(--up); background: var(--up-tint); }
.badge.neutral { color: #39446b; background: var(--neutral-tint); }
.badge.none { color: var(--muted); background: var(--bg-2); }
.badge.type { color: var(--ink); background: var(--bg); }

/* sections */
section.block { padding: 72px 0; border-bottom: 1px solid var(--ink); }
section.block.grey { background: var(--bg-2); }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head p { color: var(--ink-2); margin-top: 10px; max-width: 640px; font-size: 17px; }
@media (max-width: 640px) { section.block { padding: 52px 0; } }

/* index (ledger) table */
.ledger-wrap { overflow-x: auto; border: 2px solid var(--ink); background: var(--bg); }
table.ledger { width: 100%; border-collapse: collapse; min-width: 860px; font-size: 14.5px; }
table.ledger th { text-align: left; font: 600 11.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 12px 14px; border-bottom: 2px solid var(--ink); background: var(--bg-2); white-space: nowrap; }
table.ledger td { padding: 14px; border-bottom: 1px solid var(--hair); vertical-align: middle; }
table.ledger tr:last-child td { border-bottom: 0; }
table.ledger tbody tr:hover td { background: #fffbe0; }
table.ledger td.v { font-weight: 600; white-space: nowrap; }
table.ledger td.v .vn { display: flex; align-items: center; gap: 10px; }
table.ledger td.v img { width: 24px; height: 24px; border: 1px solid var(--hair); }
table.ledger td.v a { text-decoration: none; }
table.ledger td.m { font-family: var(--mono); font-size: 13.5px; }
table.ledger tr.lr td { background: #fffbe0; }
table.ledger tr.lr td:first-child { box-shadow: inset 4px 0 0 var(--signal); }

/* filters */
.filters { display: flex; gap: 0; border: 2px solid var(--ink); flex-wrap: wrap; margin-bottom: 20px; background: var(--bg); }
.filters button { border: 0; border-right: 1px solid var(--hair); background: transparent; font: 500 13.5px var(--mono); padding: 11px 15px; cursor: pointer; color: var(--ink-2); }
.filters button.on { background: var(--ink); color: #fff; }
.filters button:hover:not(.on) { background: var(--signal); color: var(--ink); }

/* timeline */
.timeline { border-left: 3px solid var(--ink); margin-left: 8px; }
.event { position: relative; padding: 0 0 34px 34px; }
.event::before { content: ""; position: absolute; left: -11px; top: 4px; width: 16px; height: 16px; background: var(--bg); border: 3px solid var(--ink); }
.event.worse::before { background: var(--down); }
.event.better::before { background: var(--up); }
.event .when { font: 600 13px var(--mono); color: var(--muted); }
.event .head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 8px; }
.event .head img { width: 22px; height: 22px; border: 1px solid var(--hair); }
.event h3 { font-size: 21px; }
.event h3 a { text-decoration: none; }
.event h3 a:hover { background: var(--signal); }
.event p { color: var(--ink-2); max-width: 720px; }

/* before / after */
.diff { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); }
@media (max-width: 760px) { .diff { grid-template-columns: 1fr; } }
.diff > div { padding: 0; }
.diff > div + div { border-left: 2px solid var(--ink); }
@media (max-width: 760px) { .diff > div + div { border-left: 0; border-top: 2px solid var(--ink); } }
.diff .h { padding: 12px 16px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; border-bottom: 2px solid var(--ink); }
.diff .before .h { background: var(--bg-2); }
.diff .after .h { background: var(--down-tint); color: var(--down); }
.diff .r { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--hair); font-size: 15px; }
.diff .r:last-child { border-bottom: 0; }
.diff .r span:last-child { font-family: var(--mono); font-size: 13.5px; text-align: right; }
.diff .before .r span:last-child { color: var(--up); }
.diff .after .r span:last-child { color: var(--down); }

/* cards: still-included list */
.keepers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0; border: 2px solid var(--ink); }
.keeper { padding: 20px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: grid; gap: 10px; align-content: start; }
.keeper .row { display: flex; align-items: center; gap: 10px; }
.keeper img { width: 28px; height: 28px; border: 1px solid var(--hair); }
.keeper.lr { background: #fffbe0; box-shadow: inset 0 4px 0 var(--signal); }
.keeper p { color: var(--ink-2); font-size: 14.5px; }

/* stat row */
.statrow { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); border: 2px solid var(--ink); }
.statrow div { padding: 18px 20px; border-right: 1px solid var(--hair); }
.statrow div:last-child { border-right: 0; }
.statrow b { display: block; font: 600 30px/1.1 var(--mono); letter-spacing: -0.03em; }
.statrow span { color: var(--muted); font-size: 13.5px; }
@media (max-width: 700px) { .statrow { grid-template-columns: 1fr; } .statrow div { border-right: 0; border-bottom: 1px solid var(--hair); } }

/* sponsor / partner band */
.band { border: 2px solid var(--ink); background: var(--signal); padding: 34px 36px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; box-shadow: 8px 8px 0 var(--ink); }
.band p { margin-top: 10px; color: var(--ink-2); font-size: 16.5px; max-width: 640px; }
.band .btn { box-shadow: 4px 4px 0 var(--bg); }
@media (max-width: 760px) { .band { grid-template-columns: 1fr; padding: 26px 22px; } }

/* subscribe */
.subscribe { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); }
.subscribe > div { padding: 26px; }
.subscribe > div + div { border-left: 2px solid var(--ink); background: var(--bg-2); }
@media (max-width: 760px) { .subscribe { grid-template-columns: 1fr; } .subscribe > div + div { border-left: 0; border-top: 2px solid var(--ink); } }
.subscribe code { display: block; font: 500 13.5px var(--mono); background: var(--bg); border: 1px solid var(--ink); padding: 10px 12px; margin-top: 12px; word-break: break-all; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--hair); padding: 18px 0; }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; font-weight: 600; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 22px/1 var(--mono); }
.faq details[open] summary::after { content: "−"; }
.faq details p { color: var(--ink-2); margin-top: 10px; max-width: 780px; }

/* posts */
.posts { border-top: 2px solid var(--ink); }
.post { display: grid; grid-template-columns: 140px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--hair); text-decoration: none; }
.post h3 { font-size: 22px; }
.post p { color: var(--muted); margin-top: 6px; }
.post:hover h3 { background: var(--signal); display: inline; }
@media (max-width: 640px) { .post { grid-template-columns: 1fr; gap: 6px; } }
.article { max-width: 720px; margin: 0 auto; padding: 44px 0 16px; }
.article h2 { font-size: 28px; margin: 40px 0 12px; }
.article p, .article li { color: var(--ink-2); font-size: 18px; line-height: 1.7; }
.article p { margin: 0 0 16px; }
.article ul, .article ol { padding-left: 22px; margin: 0 0 18px; }
.article table { width: 100%; border-collapse: collapse; margin: 8px 0 26px; border: 2px solid var(--ink); font-size: 15px; }
.article th, .article td { padding: 10px 12px; border-bottom: 1px solid var(--hair); text-align: left; }
.article th { background: var(--bg-2); font: 600 12px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.article .tldr { border: 2px solid var(--ink); background: #fffbe0; padding: 18px 20px; margin-bottom: 30px; box-shadow: 6px 6px 0 var(--ink); }
.article .tldr p { margin: 0; color: var(--ink); }
.inline-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border: 2px solid var(--ink); background: var(--signal); padding: 18px 20px; margin: 30px 0; }
.inline-cta p { margin: 0 !important; color: var(--ink) !important; font-weight: 600; font-size: 16.5px !important; }
.prose { max-width: 720px; padding: 44px 0; }
.prose h2 { font-size: 26px; margin: 36px 0 10px; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; }
.prose p + p { margin-top: 12px; }

/* footer */
footer.site { border-top: 3px solid var(--ink); padding: 52px 0 30px; font-size: 14.5px; color: var(--ink-2); }
footer.site .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
@media (max-width: 760px) { footer.site .cols { grid-template-columns: 1fr 1fr; } }
footer.site h4 { font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
footer.site a { text-decoration: none; color: var(--ink-2); }
footer.site a:hover { background: var(--signal); color: var(--ink); }
footer.site .bottom { border-top: 1px solid var(--hair); margin-top: 36px; padding-top: 16px; font: 400 12.5px var(--mono); color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

/* weekly check strip */
.checkstrip { border-bottom: 1px solid var(--ink); background: #fffbe0; font: 500 13px var(--mono); }
.checkstrip .wrap { display: flex; flex-wrap: wrap; gap: 6px 24px; padding-top: 12px; padding-bottom: 12px; align-items: center; }
.checkstrip b { font-weight: 600; }
.checkstrip a { margin-left: auto; }