:root{
  --ink:#1F2321;
  --paper:#F7F6F3;
  --panel:#FFFFFF;
  --line:#DDDAD2;
  --green:#1E4438;
  --blue:#4A9FD8;
  --gold:#C9A44C;
  --muted:#6B6B66;
  --good:#1E4438;
  --bad:#A0342B;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

.wrap{max-width:64rem;margin:0 auto;padding:0 1.5rem}

.hero{
  background:
    linear-gradient(180deg, #232825 0%, #1A1E1C 100%),
    repeating-linear-gradient(45deg, rgba(201,164,76,.04) 0 1px, transparent 1px 9px);
  color:#fff;
  padding:3.5rem 0 0;
  border-bottom:1px solid rgba(201,164,76,.35);
}

.brandmark{text-align:center;padding-bottom:2.5rem}

.est{
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}

.ranchname{
  font-family:Georgia,"Times New Roman",serif;
  font-size:3.6rem;
  line-height:1.05;
  letter-spacing:-.015em;
  margin:.6rem 0 .8rem;
  font-weight:400;
}

.rule{
  width:5rem;height:2px;margin:0 auto 1rem;
  background:var(--gold);
}

.tagline{
  font-size:.95rem;
  color:rgba(255,255,255,.62);
  font-style:italic;
}

.herobar{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.12);
}

.hb{
  padding:1rem .5rem;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
}
.hb:last-child{border-right:none}

.hb span{
  display:block;
  font-size:.66rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  font-weight:600;
}

.hb b{
  display:block;
  margin-top:.25rem;
  font-size:1.05rem;
  font-weight:600;
  color:#fff;
}

.subhead{
  background:var(--panel);
  border-bottom:1px solid var(--line);
  padding:2.25rem 0;
}

.subhead h1{
  margin:0 0 .7rem;
  font-size:1.65rem;
  line-height:1.2;
  letter-spacing:-.015em;
  font-weight:700;
  color:var(--ink);
}

.lede{
  margin:0;
  max-width:44rem;
  font-size:1rem;
  color:var(--muted);
}

@media(max-width:640px){
  .ranchname{font-size:2.2rem}
  .herobar{grid-template-columns:repeat(2,1fr)}
  .hb:nth-child(2){border-right:none}
}

main{padding:2.5rem 0 4rem}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.75rem;
  margin-bottom:1.5rem;
}

.panel h2{
  margin:0 0 1.25rem;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:1rem;
}

.fld{display:flex;flex-direction:column;gap:.3rem}
.fld span{font-size:.82rem;color:var(--muted);font-weight:600}

.fld input{
  font:inherit;
  padding:.6rem .7rem;
  border:1px solid var(--line);
  border-radius:3px;
  background:#fff;
  color:var(--ink);
}
.fld input:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}

.slider{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.srow{display:flex;justify-content:space-between;align-items:baseline}
.srow span{font-size:.82rem;color:var(--muted);font-weight:600}
.num{font-size:1.15rem;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}

.slider input[type=range]{width:100%;margin:.5rem 0 .3rem;accent-color:var(--green)}
.hint{font-size:.8rem;color:var(--muted);max-width:40rem}

.results{border-left:3px solid var(--green)}

.metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  margin-bottom:1.5rem;
}
.metric{background:var(--panel);padding:1rem}
.metric .k{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.metric .v{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:.2rem}
.metric .v.good{color:var(--good)}
.metric .v.bad{color:var(--bad)}

.slidebox{
  background:#FBF6E9;
  border-left:3px solid var(--gold);
  padding:.9rem 1rem;
  font-size:.92rem;
  margin-bottom:1.5rem;
}

.ledger{width:100%;border-collapse:collapse;font-size:.92rem}
.ledger th,.ledger td{padding:.55rem .5rem;border-bottom:1px solid var(--line);text-align:left}
.ledger .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger tr.hd th{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ledger tr.tot td{font-weight:700;border-top:2px solid var(--ink);border-bottom:none}
.ledger .note{color:var(--muted);font-size:.84rem}

.signal{margin-top:1.5rem;display:flex;gap:.85rem;align-items:center;flex-wrap:wrap}
.tag{
  font-size:.75rem;letter-spacing:.1em;font-weight:700;
  padding:.35rem .7rem;border-radius:3px;color:#fff;white-space:nowrap;
}
.tag.lock{background:var(--green)}
.tag.watch{background:var(--gold)}
.tag.wait{background:var(--muted)}
.signal span:last-child{font-size:.92rem;color:var(--muted)}

.note p{max-width:44rem;color:#3A3F3C}

.foot{
  background:var(--ink);
  color:rgba(255,255,255,.7);
  padding:2rem 0;
  font-size:.85rem;
}
.foot #f_ranch{color:#fff;font-weight:600;margin-bottom:.4rem}
.fine{color:rgba(255,255,255,.5);font-size:.8rem}
.foot a{color:var(--blue)}

@media(max-width:640px){
  .hero{padding:2.5rem 0 2rem}
  .hero h1{font-size:1.7rem}
  .panel{padding:1.25rem}
}
.seasonbox{background:#F1F5F2;border-left:3px solid var(--green);padding:.9rem 1rem;font-size:.92rem;margin:1.25rem 0}
.seasonbox .src{color:var(--muted);font-size:.82rem}
.gainbox{padding:.9rem 1rem;font-size:.92rem;margin-bottom:1.25rem;border-left:3px solid var(--muted);background:#F4F4F2}
.gainbox.ok{border-left-color:var(--green);background:#F1F5F2}
.gainbox.watch{border-left-color:var(--gold);background:#FBF6E9}
.gainbox.flag{border-left-color:var(--bad);background:#FBF0EE}
.chk{display:flex;gap:.5rem;align-items:center;font-size:.9rem;font-weight:600;color:var(--ink)}