:root{
  /* ---- neutrals: shared with montanareports.com so the family reads as one ---- */
  --paper:#F5F2EA;            /* warm bone */
  --wash:#ECE7DC;
  --sunk:#E2DBCD;
  --ink:#14181C;
  --ink2:#3A424A;
  --ink3:#5F676F;
  --ink4:#8F969D;
  --rule:rgba(20,24,28,.12);
  --rule2:rgba(20,24,28,.07);

  /* ---- this site's own accents ---- */
  --pine:#17493a;
  --pine-lt:rgba(23,73,58,.09);
  --pine-line:rgba(23,73,58,.22);
  --clay:#a8481c;
  --clay-lt:rgba(168,72,28,.08);

  /* ---- derived surfaces ---- */
  --nav-bg:rgba(245,242,234,.94);
  --btn-fg:#F5F2EA;
  --btn-hover:#0f3629;
  --pill-off-bg:rgba(20,24,28,.06);
  --pill-off-fg:#5F676F;
  --footer-bg:#14181C;
  --footer-fg:rgba(245,242,234,.68);
  --footer-fg2:rgba(245,242,234,.44);
  --footer-head:#F5F2EA;
  --footer-link:rgba(245,242,234,.82);
  --footer-rule:rgba(245,242,234,.16);
  --hero-scrim-1:rgba(10,18,15,.32);
  --hero-scrim-2:rgba(10,18,15,.52);
  --hero-scrim-3:rgba(10,18,15,.90);
  --hero-eyebrow:#E8B78E;
  --hero-body:#DFE6E2;
  --hero-base:#12251d;
  --hero-lift:#1d4536;
  --hero-mid:#16332a;
  --hero-deep:#0d1a15;
  --field-bg:#FFFFFF;
  --shadow:0 1px 2px rgba(20,24,28,.04);

  --ease:cubic-bezier(.2,.7,.2,1);
  --d-fast:220ms;
  color-scheme:light;
}
html[data-theme="night"]{
  --paper:#0B1016;            /* deep sky-ink */
  --wash:#111820;
  --sunk:#1B2530;
  --ink:#F5F2EA;
  --ink2:rgba(245,242,234,.80);
  --ink3:rgba(245,242,234,.56);
  --ink4:rgba(245,242,234,.40);
  --rule:rgba(245,242,234,.13);
  --rule2:rgba(245,242,234,.07);

  /* pine lifts to a readable sage; clay resolves to the family's contractor accent */
  --pine:#7FB79C;
  --pine-lt:rgba(127,183,156,.11);
  --pine-line:rgba(127,183,156,.30);
  --clay:#D2A26A;
  --clay-lt:rgba(210,162,106,.11);

  --nav-bg:rgba(11,16,22,.92);
  --btn-fg:#0B1016;
  --btn-hover:#A8D2BC;
  --pill-off-bg:rgba(245,242,234,.08);
  --pill-off-fg:rgba(245,242,234,.52);
  --footer-bg:#111820;
  --footer-fg:rgba(245,242,234,.62);
  --footer-fg2:rgba(245,242,234,.40);
  --footer-head:#F5F2EA;
  --footer-link:rgba(245,242,234,.78);
  --footer-rule:rgba(245,242,234,.12);
  --hero-scrim-1:rgba(5,9,13,.42);
  --hero-scrim-2:rgba(5,9,13,.62);
  --hero-scrim-3:rgba(5,9,13,.94);
  --hero-eyebrow:#E9DDBD;
  --hero-body:rgba(245,242,234,.80);
  --hero-base:#080E13;
  --hero-lift:#12303F;
  --hero-mid:#0E1D26;
  --hero-deep:#05090D;
  --field-bg:#1B2530;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  color-scheme:dark;
}
/* crossfade on theme change — matches the parent site's 700ms */
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{
  transition:background-color .7s var(--ease),color .7s var(--ease),
    border-color .7s var(--ease),fill .7s var(--ease),stroke .7s var(--ease)!important}
@media (prefers-reduced-motion:reduce){
  html.theme-fade,html.theme-fade *{transition:none!important}}

*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;
 font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 5%} .narrow{max-width:760px;margin:0 auto}
a{color:var(--pine)}
nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(8px);
 border-bottom:1px solid var(--rule)}
.navin{max-width:1120px;margin:0 auto;padding:0 5%;height:62px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:'Source Serif 4',serif;
 font-weight:700;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
 white-space:nowrap;line-height:1.1}
/* The mark takes its colour from a theme token, never a fixed hex, or it sinks into
   the ink background at night. Same lesson the Fire Report mark carries. */
.brand .mark{width:23px;height:23px;flex:none;display:block}
.brand .bwrap{display:block}
.brand .bsub{display:block;font-family:'JetBrains Mono',monospace;font-size:.55rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--clay);font-weight:500;margin-top:2px}
@media(max-width:700px){.brand .mark{width:20px;height:20px}}
.navlinks{display:flex;gap:22px;margin-left:auto;align-items:center}
.navlinks a{font-size:.85rem;font-weight:500;color:var(--ink2);text-decoration:none}
.navlinks a:hover{color:var(--pine)}
.navcta{background:var(--pine);color:var(--btn-fg)!important;padding:9px 16px;border-radius:3px;font-weight:600}
@media(max-width:900px){.navlinks a:not(.navcta){display:none}}
.hero{position:relative;min-height:500px;display:flex;align-items:flex-end;
 background:var(--sunk) center/cover no-repeat;color:#fff}
.hero::after{content:"";position:absolute;inset:0;
 background:linear-gradient(180deg,var(--hero-scrim-1),var(--hero-scrim-2) 45%,var(--hero-scrim-3))}
.heroin{position:relative;z-index:2;max-width:1120px;margin:0 auto;padding:0 5% 58px;width:100%}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.2em;
 text-transform:uppercase;color:var(--hero-eyebrow);font-weight:500;margin-bottom:16px}
.hero h1{font-family:'Source Serif 4',serif;font-weight:700;font-size:clamp(2.3rem,5.6vw,4rem);
 line-height:1.03;letter-spacing:-.025em;margin:0 0 18px;max-width:16ch}
.hero p{font-size:1.14rem;max-width:56ch;color:var(--hero-body);margin:0 0 26px}
.herobtns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:3px;font-weight:600;font-size:.95rem;text-decoration:none}
.btn-p{background:var(--paper);color:var(--pine)} .btn-s{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.42)}
.credit{position:absolute;right:10px;bottom:5px;z-index:3;font-size:.58rem;color:rgba(255,255,255,.45)}
section{padding:74px 0}
section.alt{background:var(--wash);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sechead{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.18em;
 text-transform:uppercase;color:var(--clay);font-weight:600;margin-bottom:12px}
h2{font-family:'Source Serif 4',serif;font-weight:700;font-size:clamp(1.7rem,3.4vw,2.3rem);
 letter-spacing:-.022em;line-height:1.15;margin:0 0 14px}
h3{font-size:1.06rem;font-weight:600;margin:0 0 7px;letter-spacing:-.01em}
.lede{font-size:1.1rem;color:var(--ink2);max-width:64ch;margin:0 0 34px}
p{margin:0 0 16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:1px;
 background:var(--rule);border:1px solid var(--rule)}
.card{background:var(--paper);padding:26px 24px;text-decoration:none;color:inherit;display:block;transition:background .12s}
.card:hover{background:var(--pine-lt)}
.card .tag{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
 text-transform:uppercase;color:var(--pine);font-weight:600;margin-bottom:10px;display:block}
.card .tag.new{color:var(--clay)}
.card p{font-size:.92rem;color:var(--ink2);margin:0}
.card .meta{font-family:'JetBrains Mono',monospace;font-size:.66rem;color:var(--ink3);margin-top:12px;letter-spacing:.04em}
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
 background:var(--rule);border:1px solid var(--rule);margin:34px 0}
.strip div{background:var(--paper);padding:20px 18px}
.strip .n{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:700;color:var(--pine);
 letter-spacing:-.03em;line-height:1}
.strip .l{font-size:.8rem;color:var(--ink2);margin-top:8px;line-height:1.4}
.tool{border:1px solid var(--rule);background:var(--paper)}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:18px;border-bottom:1px solid var(--rule);
 background:var(--wash);align-items:center}
select,input[type=search],input,textarea{font-family:Inter,sans-serif;font-size:.9rem;padding:9px 12px;
 border:1px solid var(--rule);border-radius:3px;background:var(--field-bg);color:var(--ink)}
input[type=search]{flex:1;min-width:170px}
label.chk{display:flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink2);cursor:pointer;white-space:nowrap}
.tblwrap{overflow-x:auto;max-height:520px;overflow-y:auto}
select,input,textarea{color-scheme:inherit}
input::placeholder,textarea::placeholder{color:var(--ink4)}
table{width:100%;border-collapse:collapse;font-size:.88rem}
thead th{position:sticky;top:0;background:var(--paper);text-align:left;font-family:'JetBrains Mono',monospace;
 font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:600;
 padding:12px 14px;border-bottom:2px solid var(--ink);cursor:pointer;white-space:nowrap;user-select:none}
thead th:hover{color:var(--pine)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--rule2);vertical-align:middle}
tbody tr:hover{background:var(--pine-lt)}
td.co{font-weight:600} td.num{font-family:'JetBrains Mono',monospace;text-align:right;white-space:nowrap}
.pill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.08em;
 text-transform:uppercase;padding:3px 7px;border-radius:2px;font-weight:600}
.pill.on{background:var(--pine-lt);color:var(--pine)} .pill.off{background:var(--pill-off-bg);color:var(--pill-off-fg)}
.toolfoot{padding:14px 18px;border-top:1px solid var(--rule);font-size:.8rem;color:var(--ink3);background:var(--wash)}
.article{max-width:720px;margin:0 auto}
.article h2{margin-top:0}
.article h3{font-family:'Source Serif 4',serif;font-size:1.3rem;font-weight:700;margin:36px 0 10px;letter-spacing:-.015em}
.article p,.article li{color:var(--ink2)}
.article ul,.article ol{padding-left:22px;margin-bottom:18px} .article li{margin-bottom:8px}
.article strong{color:var(--ink);font-weight:600}
.byline{font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink3);padding-bottom:18px;border-bottom:1px solid var(--rule);margin-bottom:28px}
.box{border-left:3px solid var(--clay);background:var(--clay-lt);padding:20px 24px;margin:28px 0}
.box.pine{border-left-color:var(--pine);background:var(--pine-lt)}
.box .bt{font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
 font-weight:600;color:var(--clay);margin-bottom:8px}
.box.pine .bt{color:var(--pine)} .box p:last-child{margin-bottom:0}
.factrow{display:grid;grid-template-columns:170px 1fr;gap:2px 18px;font-size:.92rem;margin:24px 0;
 border-top:1px solid var(--rule)}
.factrow dt{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
 color:var(--ink3);padding:12px 0 0;border-bottom:1px solid var(--rule2)}
.factrow dd{margin:0;padding:11px 0;border-bottom:1px solid var(--rule2);color:var(--ink2)}
@media(max-width:600px){.factrow{grid-template-columns:1fr;gap:0}.factrow dt{border-bottom:none;padding-bottom:2px}}
.src{font-size:.82rem;color:var(--ink3);border-top:1px solid var(--rule);padding-top:18px;margin-top:32px}
.form{background:var(--paper);border:1px solid var(--rule);padding:32px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field label{display:block;font-size:.8rem;font-weight:600;margin-bottom:6px;color:var(--ink2)}
.field input,.field select,.field textarea{width:100%} .field textarea{min-height:110px;resize:vertical}
button{background:var(--pine);color:var(--btn-fg);border:0;padding:14px 28px;border-radius:3px;font-weight:600;
 font-size:.95rem;cursor:pointer;font-family:Inter,sans-serif}
button:hover{background:var(--btn-hover)}
footer{background:var(--footer-bg);color:var(--footer-fg);padding:56px 0 40px;font-size:.85rem}
footer a{color:var(--footer-link)}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:34px}
@media(max-width:700px){.fgrid{grid-template-columns:1fr}}
footer h4{color:var(--footer-head);font-size:.72rem;font-family:'JetBrains Mono',monospace;letter-spacing:.14em;
 text-transform:uppercase;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0} footer li{margin-bottom:7px}
.fbot{border-top:1px solid var(--footer-rule);padding-top:22px;font-size:.74rem;color:var(--footer-fg2);line-height:1.7}
.demo{background:var(--clay);color:var(--paper);text-align:center;padding:9px 5%;font-size:.78rem;
 font-family:'JetBrains Mono',monospace;letter-spacing:.06em}

/* ---- theme toggle: same three-state control as montanareports.com ---- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  min-height:38px;padding:0 .55rem;background:none;border:0;cursor:pointer;
  color:var(--ink3);border-radius:999px;font-family:'JetBrains Mono',monospace;
  font-size:.63rem;letter-spacing:.13em;text-transform:uppercase;font-weight:500;
  transition:color var(--d-fast) var(--ease),background var(--d-fast) var(--ease)}
.theme-toggle:hover{color:var(--ink);background:var(--pine-lt)}
.theme-toggle:focus-visible{outline:2px solid var(--pine);outline-offset:2px}
.theme-toggle svg{width:17px;height:17px;flex:none}
.theme-toggle .ic{display:none}
.theme-toggle[data-mode="auto"] .ic-auto,
.theme-toggle[data-mode="day"]  .ic-day,
.theme-toggle[data-mode="night"] .ic-night{display:block}
@media(max-width:700px){.theme-toggle .theme-label{display:none}
  .theme-toggle{padding:0 .35rem}}
/* --- footer legal block --- */
.fbot p{margin:0 0 12px}
.fbot p:last-child{margin-bottom:0}
.fbot .legal{color:var(--footer-fg);font-size:.78rem;letter-spacing:.02em;
  padding-bottom:12px;border-bottom:1px solid var(--footer-rule);margin-bottom:14px}

/* --- nav corrections: nothing may wrap, and give it room to breathe --- */
.navin{height:70px;gap:0}
.brand{font-size:1.16rem;letter-spacing:-.022em}
.brand .bsub{font-size:.53rem;letter-spacing:.24em;margin-top:3px}
.navlinks{gap:30px;margin-left:auto;align-items:center}
.navlinks a{white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1}
.navcta{padding:11px 18px;letter-spacing:.005em}
@media(max-width:900px){.navlinks{gap:22px}}
@media(max-width:700px){
  .navin{height:62px}
  .navlinks a:not(.navcta){display:none}
  .brand .bsub{display:none}
}

/* multi-page additions */
.hero{background-color:var(--hero-base);
 background-image:radial-gradient(ellipse at 20% 0%,var(--hero-lift) 0%,transparent 60%),
   linear-gradient(160deg,var(--hero-mid) 0%,var(--hero-deep) 70%)}
.hero.photo{background-image:var(--heroimg),
   radial-gradient(ellipse at 20% 0%,var(--hero-lift) 0%,transparent 60%),
   linear-gradient(160deg,var(--hero-mid) 0%,var(--hero-deep) 70%);
 background-size:cover;background-position:center}
.crumb{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
 color:var(--ink3);margin-bottom:18px}
.crumb a{color:var(--ink3);text-decoration:none} .crumb a:hover{color:var(--pine)}
.pagehead{padding:52px 0 0}
.nextprev{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);
 border:1px solid var(--rule);margin-top:56px}
.nextprev a{background:var(--paper);padding:22px 24px;text-decoration:none;color:inherit}
.nextprev a:hover{background:var(--pine-lt)}
.nextprev .k{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:.13em;
 text-transform:uppercase;color:var(--clay);display:block;margin-bottom:6px}
.nextprev strong{font-weight:600;font-size:.98rem}
.loading{padding:36px;color:var(--ink3);font-size:.9rem}
.notice{background:var(--wash);border:1px solid var(--rule);padding:18px 22px;font-size:.88rem;
 color:var(--ink2);margin:0 0 28px}

/* --- phone sizing -------------------------------------------------------
   At 390px the nav needed 411px of content inside a 390px viewport, so every
   page scrolled sideways by 62px and the CTA was clipped. The wordmark is
   white-space:nowrap, so it cannot shrink on its own and pushes the row wide.
   Fix the cause: make the row actually fit. These rules are appended last on
   purpose, after both CSS blocks, so nothing later can undo them. */
.cta-short{display:none}
@media(max-width:700px){
  /* min-width:0 plus overflow lets the wordmark clip rather than force the row
     wide during the brief window before Source Serif loads, when the fallback
     serif measures ~20% wider. A momentary clip beats a sideways-scrolling page. */
  .brand{font-size:1rem;gap:9px;min-width:0;overflow:hidden}
  .brand .bwrap{min-width:0;overflow:hidden}
  .navcta{padding:8px 13px;font-size:.78rem}
  .eyebrow{letter-spacing:.13em}
}
@media(max-width:470px){
  /* Measured at 390px: the wordmark wants 179px and the row can spare 163px.
     Shrinking it to fit means 12.5px type, which is too small to be a masthead.
     Wrapping to two lines keeps it readable and the nav has the height for it. */
  .brand{font-size:.9rem;gap:8px;white-space:normal;line-height:1.08}
  .brand .bwrap{overflow:visible}
  .navcta{padding:6px 11px;font-size:.72rem}
}
@media(max-width:370px){
  /* Below this the full label genuinely cannot sit beside the wordmark.
     Keep "Start a project" as far down as it honestly fits: a bare "Start"
     says nothing about what you are starting. */
  .cta-full{display:none}
  .cta-short{display:inline}
  /* At this width the wordmark cannot fit on one line without shrinking the type
     to something unreadable, and clipping the site's own name is worse than
     wrapping it. Let it break onto two lines; the nav has the height for it. */
  .brand{font-size:.82rem;gap:7px}
  .navcta{padding:6px 12px;font-size:.71rem}
}