:root {
  color-scheme: light;
  --ink: #172c27;
  --muted: #73817a;
  --line: #dce4dc;
  --paper: #f3f5ef;
  --white: #fffefa;
  --green: #176a50;
  --green-dark: #0e4637;
  --coral: #dd735a;
  --lime: #bedb67;
  --sans: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); background-image: radial-gradient(#cfd8ce .6px, transparent .6px); background-size: 17px 17px; font: 14px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.permit-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.permit-topbar { display: grid; min-height: 72px; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.permit-brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font: 700 21px var(--serif); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px solid var(--green); border-radius: 50%; transform: rotate(-35deg); }
.brand-mark::before, .brand-mark span { content: ""; width: 14px; height: 7px; border: 1.5px solid var(--green); border-radius: 100% 0 100% 0; }
.brand-mark span { position: absolute; transform: rotate(80deg); }
.permit-topbar nav { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 3px; }
.permit-topbar nav a { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 3px; color: #69786f; font-size: 10px; text-decoration: none; white-space: nowrap; }
.permit-topbar nav a:hover, .permit-topbar nav a.is-active { background: #e2edda; color: var(--green-dark); }
.permit-topbar nav a.is-active { font-weight: 700; }
.permit-topbar-note { color: #75847a; font-size: 8px; font-weight: 700; letter-spacing: .13em; }

.permit-heading { padding: 50px 0 28px; }
.permit-kicker, .permit-section-kicker { margin: 0 0 9px; color: #748078; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.permit-kicker span { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--coral); }
.permit-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.permit-heading h1 { margin: 0; font: 500 48px/1.05 var(--serif); }
.permit-heading h1 em { color: var(--green); font-weight: 500; font-style: normal; }
.permit-subtitle { margin: 10px 0 0; color: #6d7b72; font-size: 12px; }
.permit-status { flex: 0 0 auto; margin-top: 4px; padding: 7px 10px; border: 1px solid #e2b9aa; border-radius: 3px; background: #fff2ec; color: #a85038; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.permit-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; margin-top: 27px; padding-top: 14px; border-top: 1px solid var(--line); }
.permit-facts div { display: grid; gap: 3px; }
.permit-facts span { color: #87938a; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.permit-facts strong { color: #40544a; font-size: 12px; font-weight: 600; }

.permit-deadline { display: grid; grid-template-columns: 108px minmax(0, 1fr) auto; align-items: center; gap: 16px; margin: 0 0 42px; padding: 17px 20px; border: 1px solid #d5dfb4; border-radius: 3px; background: #edf3d8; }
.deadline-date { display: grid; gap: 2px; }
.deadline-date span { color: #788852; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.deadline-date strong { color: #324e36; font: 600 18px var(--serif); }
.deadline-copy strong { color: #304a37; font-size: 12px; }
.deadline-copy p { margin: 4px 0 0; color: #63735b; font-size: 10px; line-height: 1.45; }
.deadline-amount { color: #304e36; font: 600 21px var(--serif); font-variant-numeric: tabular-nums; }

.permit-records { padding-bottom: 54px; }
.permit-records-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--line); }
.permit-records-heading .permit-section-kicker { margin-bottom: 4px; }
.permit-records-heading h2 { margin: 0; font: 500 27px var(--serif); }
.permit-filter { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.permit-filter-button { min-height: 30px; padding: 0 9px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: #718076; cursor: pointer; font-size: 9px; }
.permit-filter-button:hover, .permit-filter-button.is-active { border-color: #d2dfc7; background: #e8efdf; color: var(--green-dark); }
.permit-results { margin: 10px 0 5px; color: #89958c; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-align: right; }
.permit-timeline { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.permit-timeline::before { position: absolute; top: 0; bottom: 0; left: 159px; width: 1px; background: #d5dfd5; content: ""; }
.permit-entry { position: relative; display: grid; grid-template-columns: 142px 34px minmax(0, 1fr) 135px; gap: 0 8px; align-items: start; padding: 20px 0 21px; border-bottom: 1px solid #e0e6dd; }
.permit-entry-date { padding-top: 3px; color: #708076; font-size: 10px; font-variant-numeric: tabular-nums; }
.permit-entry-marker { position: relative; z-index: 1; width: 9px; height: 9px; margin: 5px auto 0; border: 2px solid var(--coral); border-radius: 50%; background: var(--paper); }
.permit-entry-body { min-width: 0; }
.permit-topic { display: inline-block; margin: 0 0 6px; color: #78876f; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.permit-entry h3 { margin: 0 0 5px; color: var(--ink); font: 600 17px/1.25 var(--serif); }
.permit-entry-summary { margin: 0; color: #51645a; font-size: 11px; line-height: 1.5; }
.permit-entry-detail { margin: 5px 0 0; color: #77847b; font-size: 10px; line-height: 1.5; }
.permit-entry-actions { display: flex; justify-content: flex-end; padding-top: 25px; }
.permit-entry-actions a { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 9px; text-decoration-color: #b2c5ae; text-underline-offset: 3px; }
.permit-entry-actions a:hover { color: var(--coral); }
.permit-error { margin-top: 18px; padding: 12px; border: 1px solid #e1b3a7; border-radius: 3px; background: #fff1ed; color: #984b38; font-size: 11px; }
.permit-footer { display: flex; justify-content: space-between; padding: 16px 0 22px; border-top: 1px solid var(--line); color: #7e8b81; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.permit-footer a { color: var(--green); letter-spacing: 0; text-decoration: none; }
.permit-footer a:hover { color: var(--coral); }

@media (max-width: 760px) {
  .permit-shell { width: min(100% - 36px, 600px); }
  .permit-topbar { grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 9px 0; }
  .permit-brand { gap: 6px; font-size: 18px; }
  .permit-topbar nav { display: grid; width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .permit-topbar nav a { min-width: 0; min-height: 44px; padding: 0 4px; border: 1px solid #dce4dc; background: rgba(255, 254, 250, .8); font-size: 12px; text-align: center; white-space: normal; }
  .permit-heading { padding: 35px 0 23px; }
  .permit-heading h1 { font-size: 39px; }
  .permit-status { padding: 6px 7px; font-size: 7px; }
  .permit-facts { gap: 10px; }
  .permit-facts strong { font-size: 10px; }
  .permit-deadline { grid-template-columns: 82px minmax(0, 1fr); gap: 9px; padding: 13px; }
  .deadline-date strong { font-size: 15px; }
  .deadline-amount { grid-column: 2; font-size: 17px; }
  .permit-records-heading { align-items: flex-start; flex-direction: column; }
  .permit-filter { justify-content: flex-start; }
  .permit-entry { grid-template-columns: 78px 20px minmax(0, 1fr); gap: 0 5px; padding: 16px 0; }
  .permit-timeline::before { left: 87px; }
  .permit-entry-date { font-size: 8px; }
  .permit-entry-marker { width: 8px; height: 8px; }
  .permit-entry h3 { font-size: 15px; }
  .permit-entry-summary { font-size: 10px; }
  .permit-entry-detail { font-size: 9px; }
  .permit-entry-actions { grid-column: 3; justify-content: flex-start; padding-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}