/* StackWatch design system, 2026-10-21. Layout and type direction taken from ambernoil.com (Omar's guidance):
   light serif display with an italic second phrase, quiet sans body, mono for every figure, paper background,
   hairline rules, uppercase spaced labels, one tinted band. StackWatch keeps its own teal accent. */
:root{--paper:#f4f3ef;--card:#fbfaf7;--ink:#16181b;--muted:#5d6166;--line:#d9d6ce;--rule:#16181b;
--accent:#0e6b62;--accent2:#0a524b;--sand:#e8ddc9;--up:#a3341f;--down:#2f6b3a;
--serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
--sans:"Instrument Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;
/* legacy aliases used by generated pages */
--bg:var(--paper);--warn:#f3ead7;--warnline:#e2d2b0;--soft:#ecebe5}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16.5px/1.65 var(--sans);-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}a:hover{color:var(--accent2)}
em{font-style:italic}

/* ---------- announcement bar + header ---------- */
.bar{background:var(--ink);color:#f4f3ef;text-align:center;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:9px 16px}
.bar a{color:#f4f3ef}
.nav{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.nav .in{max-width:1200px;margin:0 auto;padding:0 32px;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.logo{font:600 15px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--ink);text-decoration:none;justify-self:center;padding-bottom:6px;
background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 6px) bottom/100% 4px no-repeat}
.logo span{color:inherit}
.menu{justify-self:start;position:relative}
.menu summary{list-style:none;cursor:pointer;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);padding:10px 0}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary::after{content:" ×"}
.menu-list{position:absolute;top:44px;left:0;min-width:250px;background:var(--card);border:1px solid var(--rule);padding:8px 0;z-index:30}
.menu-list a{display:block;padding:9px 18px;color:var(--ink);text-decoration:none;font-size:15px}
.menu-list a:hover{background:var(--paper)}
.navcta{justify-self:end;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.navcta:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- article pages (generated) ---------- */
main{max-width:860px;margin:0 auto;padding:40px 24px 72px}
.crumbs{font:500 11.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 22px}.crumbs a{color:var(--muted)}
.kicker{font:600 11.5px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
h1{font:300 46px/1.04 var(--serif);letter-spacing:-.025em;margin:0 0 16px}
h1 em,h2 em{font-style:italic}
.dek{font:400 21px/1.45 var(--serif);color:var(--ink);margin:0 0 12px}
.meta{font:500 11.5px/1.6 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:18px;margin:0 0 30px}
h2{font:300 32px/1.12 var(--serif);letter-spacing:-.015em;margin:48px 0 12px}
h3{font:400 21px/1.3 var(--serif);margin:28px 0 6px}
p,li{max-width:70ch}
strong,b{font-weight:600}
.tablewrap{overflow-x:auto;margin:18px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--line)}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:14px}
td.num .note{font-family:var(--sans)}
th.num{font-family:var(--sans);font-size:11px}
.up{color:var(--up);font-weight:600}.old{color:var(--muted);text-decoration:line-through}.new{font-weight:600}
.tag{display:inline-block;font:500 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:0 7px;white-space:nowrap}
.tag.soft{border-color:var(--line);color:var(--muted)}
.callout{background:var(--warn);border-left:2px solid var(--ink);padding:16px 20px;margin:26px 0;font-size:15.5px}
.note{font-size:14px;color:var(--muted)}
.chartbox{margin:20px 0;border-top:1px solid var(--rule);padding:14px 0 4px}
.chart{width:100%;height:auto;display:block}
.chart .grid{stroke:var(--line);stroke-width:1}.chart .tick{stroke:#9a978f}
.chart .ax{font:12px var(--mono);fill:var(--muted)}
.chart .lbl{font:600 12.5px var(--sans)}
.chartcap{font:500 11.5px/1.5 var(--mono);color:var(--muted);margin:4px 0 8px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:28px 24px;margin:24px 0}
.card{border-top:1px solid var(--rule);padding:16px 0 0;background:transparent}
.card h3{margin:0 0 6px;font:400 21px/1.25 var(--serif)}.card p{margin:4px 0;font-size:14.5px;color:var(--muted)}
.card a{text-decoration:none;color:var(--ink)}.card a:hover{color:var(--accent)}
.card a.more{font:600 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:22px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--line)}
.stat{padding:16px 16px 16px 0}
.stat b{display:block;font:400 32px/1.1 var(--mono);letter-spacing:-.03em}.stat span{font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.faq{margin-top:48px;border-top:1px solid var(--rule);padding-top:8px}.faq h3{margin-top:22px}
.related{border-top:1px solid var(--rule);padding:16px 0 0;margin-top:44px}
.related strong{font:600 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;display:block;margin-bottom:10px}
.related a{display:block;padding:7px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 18px/1.35 var(--serif)}
.related a:hover{color:var(--accent)}
.cta{background:var(--sand);color:var(--ink);padding:30px 32px;margin:48px 0 0}
.cta h2{color:var(--ink);margin:0 0 10px}.cta p{color:var(--ink);margin:0 0 18px}
.cta a,.btn{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:#fff;text-decoration:none;padding:16px 24px;font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--accent)}
.cta a:hover,.btn:hover{background:var(--accent2);border-color:var(--accent2);color:#fff}
.cta a::after,.btn::after{content:"\2192";font-size:15px;letter-spacing:0}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.dark{background:var(--ink);border-color:var(--ink)}.btn.dark:hover{background:#000}
.ulink{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:3px}
.ulink:hover{color:var(--accent);border-color:var(--accent)}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0}
.filters label{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;flex-direction:column;gap:5px}
.filters select,.calc input{font:15px var(--sans);padding:9px 10px;border:1px solid var(--ink);border-radius:0;background:var(--card);color:var(--ink)}
.calc input{width:120px;font-family:var(--mono)}
.calc .tabs{display:flex;gap:0;margin:12px 0}
.calc .tabs button{font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;margin-right:-1px}
.calc .tabs button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.calc .total{font:400 34px/1.2 var(--mono);letter-spacing:-.02em;margin:14px 0}
footer{max-width:1200px;margin:0 auto;padding:28px 32px 48px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
footer a{color:var(--muted)}
pre.tpl{white-space:pre-wrap;word-wrap:break-word;background:var(--card);border:1px solid var(--line);padding:18px 20px;font:14.5px/1.6 var(--mono);overflow-x:auto}

/* ---------- homepage ---------- */
.hm main,.hm .hm-main{max-width:none;padding:0}
.hm-wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.hm-hero{padding:72px 0 64px}
.hm-hero .hm-wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:56px;align-items:center}
.hm-hero h1{font:300 clamp(46px,6.6vw,92px)/.98 var(--serif);letter-spacing:-.035em;margin:0 0 26px}
.hm-lead{font:400 20px/1.5 var(--serif);max-width:34em;margin:0 0 30px}
.hm-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 18px}
.hm-meta{font:500 11px/1.6 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.hm-meta span+span::before{content:"\00b7";margin:0 10px}
.ticket{background:var(--card);border:1px solid var(--rule);padding:22px 24px 18px;box-shadow:10px 10px 0 var(--sand)}
.ticket-hd{display:flex;justify-content:space-between;gap:12px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:6px}
.ticket h2{font:300 32px/1.1 var(--serif);margin:12px 0 4px;letter-spacing:-.02em}
.ticket-sub{font:italic 400 15px/1.4 var(--serif);color:var(--muted);margin:0 0 12px}
.ticket-row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding:9px 0;font-size:15px}
.ticket-row b{font:400 17px/1 var(--mono);letter-spacing:-.02em}
.ticket-ft{font:500 10.5px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px;margin-top:4px}
.ticks{height:16px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px) top/100% 8px no-repeat,repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 100px) top/100% 16px no-repeat;opacity:.85}
.hm-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.hm-stats div{padding:26px 0 30px}
.hm-stats span{display:block;font:600 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
.hm-stats b{font:400 44px/1 var(--mono);letter-spacing:-.04em}
.hm-sec{padding:88px 0;border-bottom:1px solid var(--line)}
.hm-sec h2{font:300 clamp(36px,4.6vw,60px)/1.02 var(--serif);letter-spacing:-.025em;margin:0 0 18px}
.hm-intro .kicker{margin-bottom:18px}
.hm-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr);gap:40px;align-items:end;margin-bottom:44px}
.hm-intro p{color:var(--muted);margin:0}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.step{border-top:1px solid var(--rule);padding-top:16px}
.step i{font:400 13px var(--mono);font-style:normal;display:block;margin-bottom:40px}
.step h3{font:300 30px/1.12 var(--serif);margin:0 0 12px;letter-spacing:-.015em}
.step p{color:var(--muted);margin:0}
.feat{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.feat-title{font:italic 300 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:-.025em;margin:6px 0 14px}
.feat-sub{font:400 20px/1.45 var(--serif);margin:0 0 14px}
.feat-meta{font:500 11px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bars-hd{display:flex;justify-content:space-between;font:500 11px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0;border-top:1px solid var(--line)}
.bar-row:last-of-type{border-bottom:1px solid var(--line)}
.bar-lbl{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.bar-lbl b{font:400 15px var(--mono)}
.bar-lbl .up{font:500 13px var(--mono)}
.track{position:relative;height:22px;background:repeating-linear-gradient(90deg,#c9c5bb 0 1px,transparent 1px 10%) }
.track .was,.track .now{position:absolute;left:0;height:9px}
.track .was{top:0;background:var(--sand);border:1px solid #cdbd9e}
.track .now{bottom:0;background:var(--accent)}
.legend{display:flex;gap:18px;font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:14px 0 0}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px}
.legend .k1{background:var(--sand);border:1px solid #cdbd9e}.legend .k2{background:var(--accent)}
details.src{border-bottom:1px solid var(--line);padding:14px 0}
details.src summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;font:400 19px/1.3 var(--serif)}
details.src summary::-webkit-details-marker{display:none}
details.src summary::after{content:"+";font:300 22px/1 var(--sans)}
details.src[open] summary::after{content:"\2212"}
details.src p{font-size:14px;color:var(--muted);margin:10px 0 0}
.feat-ctas{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:24px}
.log-hd{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1fr) 150px;gap:16px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--rule);padding:0 0 12px}
.log-row{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1fr) 150px;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.log-row:hover{background:var(--card)}
.log-row .d{font:400 12.5px var(--mono);color:var(--muted)}
.log-row .v{font:300 30px/1.1 var(--serif);letter-spacing:-.015em}
.log-row .p{font:italic 400 16px/1.35 var(--serif);color:var(--muted)}
.log-row .c{font:400 14px var(--mono);text-align:right}
.log-row .c em{display:block;font-style:normal;color:var(--up)}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.tool{border-top:1px solid var(--rule);padding-top:16px;color:var(--ink);text-decoration:none}
.tool span{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tool h3{font:300 26px/1.15 var(--serif);margin:28px 0 8px}
.tool p{color:var(--muted);font-size:14.5px;margin:0}
.tool:hover h3{color:var(--accent)}
.band{background:var(--sand);padding:88px 0}
.band .hm-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px}
.band h2{font:300 clamp(36px,4.6vw,60px)/1.02 var(--serif);letter-spacing:-.025em;margin:0}
.band-lead{font:400 19px/1.5 var(--serif);margin:0 0 24px}
.rows div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-top:1px solid var(--rule)}
.rows div:last-child{border-bottom:1px solid var(--rule)}
.rows span{font:600 11px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.rows p{margin:0;font-size:15px}
.final{text-align:center;padding:100px 0 110px}
.final h2{font:300 clamp(44px,7vw,96px)/.98 var(--serif);letter-spacing:-.035em;margin:12px 0 34px}
.final .hm-ctas{justify-content:center;align-items:center;gap:26px}
.final p{margin-left:auto;margin-right:auto}.final .hm-meta{display:flex;justify-content:center}

@media (max-width:900px){
.hm-hero .hm-wrap,.feat,.band .hm-wrap,.hm-intro{grid-template-columns:1fr}
.steps{grid-template-columns:1fr}.tools{grid-template-columns:1fr 1fr}
.hm-stats{grid-template-columns:1fr 1fr}
.log-hd{display:none}.log-row{grid-template-columns:1fr auto}.log-row .d{grid-column:1/-1}.log-row .p{grid-column:1}.log-row .c{grid-row:2;grid-column:2}
}
@media (max-width:560px){
.nav .in{padding:0 16px;height:58px}.logo{letter-spacing:.22em;font-size:13px}.menu-list{min-width:220px}
.hm-wrap{padding:0 16px}.hm-hero{padding:40px 0}.hm-sec,.band{padding:56px 0}.final{padding:64px 0 72px}
.tools{grid-template-columns:1fr}.hm-stats b{font-size:34px}.rows div{grid-template-columns:1fr;gap:4px}
h1{font-size:36px}main{padding:28px 16px 56px}.chartbox{overflow-x:auto}.chart{min-width:600px}.ticket{box-shadow:6px 6px 0 var(--sand)}
}
@media (max-width:640px){
#calc-root .tablewrap{overflow:visible;border:0;margin:8px 0}
#calc-root table,#calc-root tbody,#calc-root tr,#calc-root td{display:block;width:100%}
#calc-root thead{display:none}
#calc-root tr{border-top:1px solid var(--rule);margin:0 0 14px;padding:10px 0;background:transparent}
#calc-root td{border:0;padding:3px 0;text-align:left;white-space:normal}
#calc-root td.num{text-align:left;white-space:normal}
#calc-root td[data-label]::before{content:attr(data-label) ": ";color:var(--muted);font-size:13px}
#calc-root td[data-out]{font-weight:600}
}

/* ---------- elements used by the hand-written pages (2026-10-21 restyle) ---------- */
.src{font-size:14px;color:var(--muted)}
.chk{padding-left:0;list-style:none}
.chk li{padding:7px 0 7px 28px;position:relative;border-bottom:1px solid var(--line)}
.chk li:before{content:"\2713";position:absolute;left:0;color:var(--accent);font-weight:600}
.box{border:1px solid var(--rule);padding:22px 24px;margin:28px 0;background:var(--card)}
.price{font:400 40px/1.1 var(--mono);letter-spacing:-.03em}
.price small{font:500 13px var(--sans);color:var(--muted);letter-spacing:0}
main > table{margin:18px 0;border-top:1px solid var(--rule)}
main td{font-variant-numeric:tabular-nums}