/* Boring Property Tax Company -- shared base.
   Everything here is used by more than one page: the type scale, the dark band that
   carries the masthead and footer, and the generic light-section helpers. Page-specific
   rules stay inline in the page that needs them, so this file never grows a section
   only one page reads. */

@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/SourceSerif4-var.woff2') format('woff2')}
@font-face{font-family:Archivo;font-style:normal;font-weight:100 900;font-display:swap;src:url('/fonts/Archivo-var.woff2') format('woff2')}

:root{
  --navy:#1B2A41;
  --steel:#3E5C76;
  --charcoal:#2E3440;
  --gray:#8D99A6;
  --line:#E5E8EC;
  --paper:#F7F8FA;

  --rule-dark:rgba(247,248,250,.22);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:Archivo,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(22px,5vw,72px);
  --maxw:1240px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--charcoal);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--navy);margin:0;letter-spacing:-.005em}
h1{font-size:clamp(38px,5.6vw,68px);line-height:1.1}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.18}
h3{font-size:clamp(19px,1.6vw,22px);line-height:1.3}
p{margin:0 0 1.1em}
a{color:var(--steel)}

/* the letterspaced label that runs through the whole site */
.eyebrow{
  font-family:var(--sans);font-size:12px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);
  margin:0 0 20px;
}
.on-dark .eyebrow,.eyebrow.light{color:var(--gray)}

/* ---------- dark band: masthead and footer ---------- */
.on-dark{background:var(--navy);color:var(--paper)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}

.topbar{border-bottom:1px solid var(--rule-dark)}
/* 12px rather than 22: the nav links now carry 12px of their own, so the bar keeps
   roughly the height it had before they became tappable */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:12px}
/* the lockup's own minimum is 200px wide - below that the wordmark stops reading */
.mark{display:block;line-height:0;position:relative}
/* The wordmark now reads "Company" rather than "Co.", so the lockup is about a third
   wider for the same cap height and the box has to grow to match. */
.mark img{display:block;width:clamp(238px,24vw,318px);height:auto}
nav{display:flex;gap:clamp(16px,2.2vw,34px);flex-wrap:wrap}
/* A nav item is 20px of type and a thumb needs 44, so the link carries real padding
   and the underline moves to a pseudo-element. An invisible overlay was tried first
   and does not work here: it reaches past the masthead and the hero, painted later,
   takes the tap instead. The 9px is the 12px padding less the 3px the rule used to
   sit below the word, so nothing moved. */
nav a{
  position:relative;padding:12px 0;
  font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;
}
nav a::before{
  content:"";position:absolute;left:0;right:0;bottom:9px;height:1px;
  background:transparent;
}
nav a:hover::before,nav a:focus-visible::before{background:var(--gray)}
/* the section you are already in */
nav a[aria-current="page"]::before{background:var(--paper)}
/* the logo is a 19px image; this takes the tap without taking up any space, and unlike
   the nav it sits in the middle of the bar with room above and below */
.mark::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;
  transform:translateY(-50%);
}

/* understated arrow link, borrowed from editorial practice */
.textlink{
  display:inline-flex;align-items:center;gap:12px;margin-top:26px;
  font-size:14px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--paper);text-decoration:none;padding-bottom:12px;border-bottom:1px solid var(--rule-dark);
  transition:border-color .15s ease,gap .15s ease;
}
.textlink:hover,.textlink:focus-visible{border-bottom-color:var(--paper);gap:18px}
.textlink svg{flex:none}
/* the same link on paper */
.textlink.on-paper{color:var(--navy);border-bottom-color:var(--line)}
.textlink.on-paper:hover,.textlink.on-paper:focus-visible{border-bottom-color:var(--navy)}

/* ---------- light sections ---------- */
section.band{border-top:1px solid var(--line)}
section.band > .wrap{padding-block:clamp(52px,7vw,96px)}
.head{max-width:60ch;margin-bottom:clamp(30px,4vw,48px)}
.head p{color:var(--steel);margin:18px 0 0;max-width:54ch}
.prose{max-width:66ch}
.prose p:last-child{margin-bottom:0}
.muted{color:var(--steel)}
.src{font-size:13.5px;color:var(--steel);line-height:1.55;margin:22px 0 0;max-width:72ch}

footer{border-top:1px solid var(--rule-dark)}
footer .wrap{padding-block:clamp(34px,4vw,52px)}
.frow{display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--gray)}
.fmark{display:flex;align-items:center;gap:14px}
.fmark img{display:block;width:20px;height:20px;flex:none}
.frow a{color:var(--paper)}
.disclaim{font-size:13px;color:var(--gray);max-width:88ch;margin:26px 0 0;line-height:1.6}
/* the two reference pages hang off the footer rather than the masthead: someone
   looking for the methodology is already at the bottom of the page */
.flinks{display:flex;flex-wrap:wrap;gap:0 26px;margin:24px 0 0;
        padding-top:12px;border-top:1px solid var(--rule-dark)}
/* same trick as the nav: padding makes these 44px to a thumb without opening up the row */
.flinks a{display:inline-block;padding:12px 0;
          font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
          color:var(--gray);text-decoration:none;border-bottom:1px solid transparent}
.flinks a:hover,.flinks a:focus-visible{color:var(--paper);border-bottom-color:var(--gray)}

:focus-visible{outline:2px solid var(--steel);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--gray)}

/* ---- the three-line button ----
   Hidden until the nav no longer fits on one row beside the wider lockup. */
.navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;width:44px;height:44px;margin-right:-10px;padding:0;flex:none;
  background:none;border:0;cursor:pointer}
.navtoggle span{display:block;width:22px;height:1.5px;background:var(--paper);
  transition:transform .22s ease,opacity .16s ease}
/* the three bars fold into a cross: 1.5 of bar plus 5 of gap is 6.5 to the middle */
.topbar.open .navtoggle span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.topbar.open .navtoggle span:nth-child(2){opacity:0}
.topbar.open .navtoggle span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
@media (prefers-reduced-motion:reduce){ .navtoggle span{transition:none} }

@media (max-width:1020px){
  .topbar .wrap{flex-wrap:wrap;gap:0;padding-block:12px}
  .navtoggle{display:flex}
  /* the panel is a third flex child on its own row, so it sits in normal flow and
     pushes the page down instead of floating over it */
  nav{order:3;flex-basis:100%;display:none;flex-direction:column;gap:0;
      margin-top:10px;padding-top:2px;border-top:1px solid var(--rule-dark)}
  .topbar.open nav{display:flex}
  nav a{padding:15px 0;font-size:12.5px;letter-spacing:.12em;
        color:rgba(247,248,250,.74);border-bottom:1px solid rgba(247,248,250,.09)}
  nav a:last-child{border-bottom:0}
  nav a::before{display:none}       /* the row rule replaces the underline here */
  nav a[aria-current="page"],nav a:hover{color:var(--paper)}
}

/* ==========================================================================
   Insights: the index list and the articles.
   Both live only under /insights/, but they share this much between them, so
   the rules sit here rather than being written twice.
   ========================================================================== */

/* ---- the masthead strip that opens every insights page ---- */
.ix-top{background:var(--navy)}
.ix-top .wrap{padding-block:clamp(40px,5.5vw,76px) clamp(36px,4.6vw,62px)}
.ix-top h1{color:var(--paper);max-width:18ch}
.ix-top .ix-standfirst{color:var(--gray);font-size:clamp(17px,1.5vw,19px);
                       max-width:58ch;margin:22px 0 0}

/* ---- the index list ----
   The meta rail is the same 190px label column the deadlines chart uses, so the
   two lists rhyme rather than each inventing their own measure. */
.ix{list-style:none;margin:0;padding:0}
.ix-item{border-bottom:1px solid var(--line)}
.ix-item:first-child{border-top:1px solid var(--navy)}
.ix-link{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
         gap:0 clamp(16px,2vw,28px);align-items:start;
         padding:clamp(26px,3vw,38px) 0;text-decoration:none;color:inherit}
.ix-meta{grid-column:1;margin:0;padding-top:5px}
.ix-tag{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
        letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
.ix-date{display:block;font-size:13px;color:var(--gray);margin-top:6px;
         font-variant-numeric:tabular-nums}
.ix-body{grid-column:2;min-width:0}
.ix-title{font-family:var(--serif);font-weight:400;color:var(--navy);
          font-size:clamp(22px,2.5vw,31px);line-height:1.2;margin:0;
          letter-spacing:-.005em;text-wrap:balance}
.ix-dek{color:var(--steel);font-size:16px;margin:12px 0 0;max-width:62ch}
.ix-more{display:inline-flex;align-items:center;gap:10px;margin-top:18px;
         font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
         color:var(--navy);transition:gap .15s ease}
.ix-more svg{flex:none}
.ix-link:hover .ix-title,.ix-link:focus-visible .ix-title{color:var(--steel)}
.ix-link:hover .ix-more{gap:16px}

/* ---- an article ---- */
.post-head{max-width:72ch;padding-block:clamp(40px,5.5vw,76px) clamp(24px,3vw,38px)}
.post-head .eyebrow{margin-bottom:22px}
.post-head .eyebrow a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.post-head h1{font-size:clamp(32px,4.4vw,54px);color:var(--paper);text-wrap:balance}
.post-dek{color:var(--gray);font-size:clamp(17px,1.5vw,19.5px);margin:22px 0 0;max-width:56ch}
.post-meta{font-size:13px;color:var(--gray);margin:26px 0 0;
           padding-top:18px;border-top:1px solid var(--rule-dark);max-width:56ch}

.post-body{padding-block:clamp(40px,5vw,68px) clamp(48px,6vw,84px);max-width:68ch}
.post-body > p{margin:0 0 1.25em}
.post-body h2{font-size:clamp(23px,2.4vw,30px);margin:clamp(38px,4vw,54px) 0 16px}
.post-body h3{font-size:clamp(18px,1.6vw,21px);margin:clamp(28px,3vw,38px) 0 12px}
.post-body ul{margin:0 0 1.25em;padding-left:22px}
.post-body li{margin-bottom:.55em}
.post-body li:last-child{margin-bottom:0}
.post-body strong{font-weight:600;color:var(--navy)}

/* a statute or a city document, quoted exactly. The rule marks it as somebody
   else's words; the cite line says whose. */
.quote{margin:clamp(28px,3vw,38px) 0;padding:2px 0 2px 22px;border-left:2px solid var(--navy)}
.quote p{font-family:var(--serif);font-size:clamp(18px,1.8vw,21px);line-height:1.5;
         color:var(--navy);margin:0}
.quote cite{display:block;font-family:var(--sans);font-style:normal;font-size:12px;
            font-weight:600;letter-spacing:.14em;text-transform:uppercase;
            color:var(--steel);margin-top:14px}

/* a worked calculation. Figures right-aligned on tabular numerals so the digits
   stack, which is the whole point of showing the arithmetic. */
.calc{margin:clamp(28px,3vw,38px) 0;border-top:1px solid var(--navy);
      border-bottom:1px solid var(--navy)}
.calc-row{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
          padding:13px 0;border-bottom:1px solid var(--line)}
.calc-row:last-child{border-bottom:0}
.calc-row.total{border-top:1px solid var(--line)}
.calc-k{font-size:15.5px;color:var(--charcoal);margin:0}
.calc-k small{display:block;font-size:13px;color:var(--gray);margin-top:2px}
.calc-v{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);color:var(--navy);
        margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc-row.total .calc-k{font-weight:600;color:var(--navy)}
.calc-row.total .calc-v{font-size:clamp(23px,2.2vw,28px)}
.calc-cap{font-size:13.5px;color:var(--steel);line-height:1.55;margin:14px 0 0;max-width:68ch}

/* the closing invitation, on paper */
.post-end{border-top:1px solid var(--line);padding-block:clamp(36px,4.4vw,58px)}
.post-end h2{font-size:clamp(22px,2.2vw,28px);margin:0 0 12px}
.post-end p{color:var(--steel);max-width:56ch;margin:0}

@media (max-width:760px){
  .ix-link{grid-template-columns:minmax(0,1fr);gap:14px 0}
  .ix-meta,.ix-body{grid-column:1}
  .ix-date{display:inline;margin-top:0}
  .ix-tag{display:inline;margin-right:10px}
  .ix-meta{padding-top:0}
}