/* LAHomework design tokens and base.
   Palette: drafting vellum ground, ink linework, pine accent, brass for
   city map-book references. Semantic colors are separate from the accent. */
:root{
  --ground:#F5EFE6; --surface:#FFFBF6; --surface-2:#EDE4D7;
  --ink:#251B14; --ink-2:#4A3B2E; --muted:#7A6A59; --faint:#A2937F;
  --rule:#E2D6C4; --rule-strong:#B8A78F;
  --accent:#A8482B; --accent-ink:#82361F; --accent-wash:#F5E4DA;
  --brass:#96701F; --brass-wash:#F5EBD6;
  --ok:#5F7A45; --ok-wash:#E9EEDF;
  --caution:#9A6A1C; --caution-wash:#F7EEDC;
  --absent:#857A6C; --absent-wash:#EFE9DF;
  --sage:#7E8560;
  --shadow:0 1px 2px rgba(37,27,20,.07),0 10px 28px -14px rgba(37,27,20,.28);
  --measure:66ch;
  --f-display:Archivo,"Helvetica Neue",Arial,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#191310; --surface:#221A15; --surface-2:#2B211A;
    --ink:#F0E7DC; --ink-2:#D3C5B4; --muted:#A1907C; --faint:#7A6C5C;
    --rule:#382C23; --rule-strong:#50402F;
    --accent:#E08A63; --accent-ink:#F0A883; --accent-wash:#3A2318;
    --brass:#D9A94E; --brass-wash:#332716;
    --ok:#9CB57A; --ok-wash:#232B18;
    --caution:#D9A94E; --caution-wash:#332716;
    --absent:#9A8D7E; --absent-wash:#2A221B;
    --sage:#9BA37C;
    --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.65);
  }
}
:root[data-theme="dark"]{
  --ground:#191310; --surface:#221A15; --surface-2:#2B211A;
  --ink:#F0E7DC; --ink-2:#D3C5B4; --muted:#A1907C; --faint:#7A6C5C;
  --rule:#382C23; --rule-strong:#50402F;
  --accent:#E08A63; --accent-ink:#F0A883; --accent-wash:#3A2318;
  --brass:#D9A94E; --brass-wash:#332716;
  --ok:#9CB57A; --ok-wash:#232B18;
  --caution:#D9A94E; --caution-wash:#332716;
  --absent:#9A8D7E; --absent-wash:#2A221B;
  --sage:#9BA37C;
  --shadow:0 1px 2px rgba(0,0,0,.45),0 10px 28px -14px rgba(0,0,0,.65);
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;line-height:1.12;
  letter-spacing:-.02em;margin:0}
h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:650}
h3{font-size:1.05rem;font-weight:650;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent-ink);text-underline-offset:3px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.prose{max-width:var(--measure)}
.stack{display:flex;flex-direction:column}
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* header */
.site-head{border-bottom:1px solid var(--rule);background:var(--surface)}
.site-head .wrap{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);
  text-decoration:none;font-family:var(--f-display);font-weight:700;
  font-size:1.12rem;letter-spacing:-.025em}
.brand svg{width:26px;height:26px;display:block}
.brand span{font-weight:500}
.nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.nav a{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

/* search */
.search{display:flex;gap:0;border:1.5px solid var(--rule-strong);
  border-radius:3px;background:var(--surface);overflow:hidden}
.search input{flex:1;min-width:0;border:0;padding:15px 16px;font:inherit;
  background:transparent;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:none}
.search button{border:0;background:var(--accent);color:#fff;padding:0 24px;
  font:600 .92rem var(--f-body);cursor:pointer;letter-spacing:.01em}
.search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)}

/* record card: the assessor-card pattern used on the parcel page */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px}
.card-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;padding:14px 18px;border-bottom:1px solid var(--rule)}
.card-body{padding:18px}
.rows{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:0}
.rows>dt{padding:11px 0;border-top:1px solid var(--rule);color:var(--muted);
  font-size:.82rem;letter-spacing:.02em}
.rows>dd{padding:11px 0;border-top:1px solid var(--rule);margin:0;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rows>dt:first-of-type,.rows>dd:first-of-type{border-top:0}
.val{font-family:var(--f-mono);font-size:.95rem}
.val-lg{font-family:var(--f-mono);font-size:1.15rem;font-weight:500}

/* provenance chips: where each fact came from. Information, not ornament. */
.chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;
  border-radius:2px;font:500 .68rem/1.5 var(--f-mono);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.chip-county{background:var(--ok-wash);color:var(--ok)}
.chip-city{background:var(--brass-wash);color:var(--brass)}
.chip-geom{background:var(--accent-wash);color:var(--accent-ink)}
.chip-none{background:var(--absent-wash);color:var(--absent)}
.chip-amb{background:var(--caution-wash);color:var(--caution)}
.absent{color:var(--faint);font-style:italic;font-family:var(--f-body);font-size:.9rem}

/* notice */
.notice{border-left:3px solid var(--caution);background:var(--caution-wash);
  padding:13px 16px;border-radius:0 3px 3px 0;font-size:.88rem;color:var(--ink-2)}
.notice-quiet{border-left-color:var(--rule-strong);background:var(--surface-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;
  border-radius:3px;font:600 .9rem var(--f-body);text-decoration:none;cursor:pointer;
  border:1.5px solid transparent}
.btn-primary{background:var(--accent);color:#fff}
.btn-ghost{border-color:var(--rule-strong);color:var(--ink);background:var(--surface)}

/* footer */
.site-foot{border-top:1px solid var(--rule);margin-top:64px;padding:32px 0 48px;
  color:var(--muted);font-size:.83rem}
.site-foot .wrap{display:flex;gap:32px;flex-wrap:wrap;justify-content:space-between}
.site-foot a{color:var(--muted)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- "Get it done": actions, visually distinct from the record above it --- */
.doit{background:var(--accent-wash);border:1px solid var(--rule);border-radius:4px;
  padding:22px}
.doit h2{font-size:1.15rem}
.doit-intro{margin-top:7px;color:var(--ink-2);font-size:.93rem;max-width:62ch}
.needs{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  gap:10px;margin-top:18px}
.need{background:var(--surface);border:1px solid var(--rule);border-radius:3px;
  padding:0;display:flex;flex-direction:column}
.need-top{display:flex;align-items:flex-start;gap:10px;padding:13px 14px 11px;
  cursor:pointer;text-align:left;background:none;border:0;font:inherit;color:inherit;width:100%}
.need-box{flex:none;width:17px;height:17px;border:1.5px solid var(--rule-strong);
  border-radius:2px;margin-top:2px;display:grid;place-items:center;
  background:var(--surface);transition:background .12s,border-color .12s}
.need[data-on="1"] .need-box{background:var(--accent);border-color:var(--accent)}
.need-box svg{width:11px;height:11px;opacity:0}
.need[data-on="1"] .need-box svg{opacity:1}
.need[data-on="1"]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.need-label{font-weight:600;font-size:.95rem;line-height:1.35}
.need-why{color:var(--muted);font-size:.83rem;margin-top:3px;line-height:1.45}
.need-foot{border-top:1px solid var(--rule);padding:8px 14px;margin-top:auto;
  display:flex;justify-content:space-between;align-items:center;gap:8px}
.need-did{font-size:.76rem;color:var(--muted);background:none;border:0;
  cursor:pointer;font-family:var(--f-body);text-decoration:underline;
  text-underline-offset:2px;padding:0}
.need[data-done="1"]{opacity:.55}
.need[data-done="1"] .need-label{text-decoration:line-through}
.doit-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--rule)}
.doit-count{font-family:var(--f-mono);font-size:.84rem;color:var(--muted)}
.doit-add{display:flex;gap:8px;flex:1;min-width:230px}
.doit-add input{flex:1;min-width:0;border:1.5px solid var(--rule-strong);border-radius:3px;
  padding:9px 11px;font:inherit;font-size:.9rem;background:var(--surface);color:var(--ink)}
.doit-note{margin-top:12px;font-size:.8rem;color:var(--muted);max-width:62ch}

/* --- how it works: numbered sequence (numbering is real, not decorative) --- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;margin-top:26px}
.step{background:var(--surface);padding:20px}
.step-n{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;
  color:var(--accent);font-weight:500}
.step h3{margin-top:9px}
.step p{margin-top:6px;color:var(--ink-2);font-size:.92rem}
.faq{margin-top:14px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:15px 0;font-weight:600;font-size:.97rem;
  list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--muted);
  font-size:1.15rem;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq-a{padding:0 0 16px;color:var(--ink-2);font-size:.93rem;max-width:66ch}

/* --- hero image: swap the <img>/inline svg for a real photograph when licensed --- */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:38px;
  align-items:center}
.hero-art{border:1px solid var(--rule);border-radius:5px;overflow:hidden;
  background:var(--surface-2);box-shadow:var(--shadow);line-height:0}
.hero-art svg,.hero-art img{width:100%;height:auto;display:block}
.hero-cap{font:400 .72rem var(--f-mono);color:var(--faint);padding:7px 10px;
  border-top:1px solid var(--rule);background:var(--surface);line-height:1.4}
@media (max-width:880px){.hero{grid-template-columns:1fr;gap:26px}}

/* ============================================================
   Homepage hero. Editorial treatment, deliberately unlike the
   record pages. The field is 3,915 REAL Silver Lake parcels
   pulled from the database, not decoration: the page opens on
   the thing the product is about. Fixed dark palette so it
   reads identically in both themes, the way a photograph would.
   ============================================================ */
.hero-full{position:relative;overflow:hidden;background:#221812;isolation:isolate}
.pfield{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.pfield .pf-lot path{fill:none;stroke:#8A6A4E;stroke-width:1;vector-effect:non-scaling-stroke}
.pfield .pf-one{fill:#A8482B;stroke:#F0A47A;stroke-width:2;vector-effect:non-scaling-stroke}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(58% 70% at 76% 12%, rgba(255,190,110,.30), transparent 62%),
    radial-gradient(90% 100% at 22% 96%, rgba(34,24,18,.94), rgba(34,24,18,.30) 58%),
    linear-gradient(180deg, rgba(34,24,18,.62) 0%, rgba(34,24,18,.18) 40%, rgba(34,24,18,.86) 100%)}
.hero-inner{position:relative;z-index:2;max-width:1080px;margin:0 auto;
  padding:92px 24px 72px}
.hero-tag{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#E8C79B;
  border:1px solid rgba(232,199,155,.34);border-radius:2px;padding:5px 11px}
.hero-h1{font-family:var(--f-display);font-weight:700;color:#FCF3E7;
  font-size:clamp(2.7rem,7.4vw,5.6rem);line-height:.94;letter-spacing:-.045em;
  margin-top:22px;max-width:13.5ch;text-wrap:balance}
.hero-h1 em{font-style:normal;color:#F0A47A}
.hero-lede{margin-top:20px;max-width:52ch;color:#E4D3BE;font-size:1.08rem;line-height:1.55}
.hero-search{margin-top:30px;max-width:600px;display:flex;
  border:1px solid rgba(252,243,231,.28);border-radius:3px;overflow:hidden;
  background:rgba(24,17,12,.62);backdrop-filter:blur(3px)}
.hero-search input{flex:1;min-width:0;border:0;background:transparent;color:#FCF3E7;
  font:inherit;padding:17px 18px}
.hero-search input::placeholder{color:#A98F74}
.hero-search input:focus{outline:none}
.hero-search button{border:0;background:#A8482B;color:#fff;padding:0 26px;
  font:600 .93rem var(--f-body);cursor:pointer}
.hero-search:focus-within{border-color:#F0A47A}
.hero-hint{margin-top:11px;font-size:.84rem;color:#B9A188}
.hero-hint a{color:#E8C79B}
/* the callout: names the highlighted lot, so the field reads as record not
   texture. Anchored to the right half because the headline owns the left.
   Percentages map straight to the viewBox on desktop, where the hero is wider
   than 16:9 and the slice crop takes from the top and bottom, not the sides. */
.hero-note{position:absolute;z-index:2;left:76.6%;top:54.5%;display:none;
  align-items:center;gap:0;pointer-events:none}
@media (min-width:1000px){.hero-note{display:flex}}
.hero-note-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid #F0A47A;
  flex:none;margin-left:-4px}
.hero-note-line{width:64px;height:1px;background:#F0A47A;flex:none}
.hero-note-txt{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.09em;
  color:#F0A47A;white-space:nowrap;margin-left:9px}
.hero-note-txt b{display:block;font-weight:500;color:#FCF3E7;letter-spacing:.04em}

/* stat band: one bold horizontal statement, not a row of cards */
.band{background:#251B14;color:#F5EFE6;border-top:1px solid rgba(245,239,230,.12)}
.band-in{max-width:1080px;margin:0 auto;padding:30px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px}
.band-n{font-family:var(--f-mono);font-size:clamp(1.5rem,2.7vw,2.1rem);font-weight:500;
  letter-spacing:-.02em;color:#F0A47A;font-variant-numeric:tabular-nums}
.band-l{font-size:.83rem;color:#C7B49C;margin-top:3px;line-height:1.4}

/* --- neighbourhood map on the parcel page: homepage field style, page scale --- */
.pmap-wrap{border:1px solid var(--rule);border-radius:4px;overflow:hidden;
  background:#221812;line-height:0}
.pmap{width:100%;height:auto;display:block}
/* The map is a build-time <img> carrying width/height attributes. Without an
   explicit height:auto the container constrains width only, the attribute height
   stands, and the map squashes: parcels shear and the address point stops being
   a circle. Do NOT pin aspect-ratio here: the attributes already give the browser
   the exact intrinsic ratio (so no layout shift), and a hardcoded value that is
   even 0.1% off is enough to make the point visibly elliptical. */
.pmap-wrap img{width:100%;height:auto;display:block}
.pm-bg{fill:#221812}
.pm-lot path{fill:none;stroke:#8A6A4E;stroke-width:1;vector-effect:non-scaling-stroke}
.pm-bld path{fill:#3C2C21;stroke:none}
.pm-one path{fill:#A8482B;fill-opacity:.85;stroke:#F0A47A;stroke-width:2;
  vector-effect:non-scaling-stroke}
.pm-amb path{fill:#8A6A1E;fill-opacity:.28;stroke:#D9A94E;stroke-width:1.5;
  stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.pm-pt circle{fill:none;stroke:#FCF3E7;stroke-width:1.5}
.pm-pt circle:first-child{fill:#FCF3E7}
.pm-scale line{stroke:#C7B49C;stroke-width:1}
.pm-scale text{fill:#C7B49C;font:400 10px var(--f-mono);text-anchor:middle}
.pm-n path{stroke:#C7B49C;stroke-width:1.2;fill:none}
.pm-n text{fill:#C7B49C;font:500 10px var(--f-mono);text-anchor:middle}
.pmap-cap{background:var(--surface);border-top:1px solid var(--rule);
  padding:9px 13px;font-size:.78rem;color:var(--muted);line-height:1.45;
  display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
.pmap-key{display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.pmap-key span{display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}
.pmap-key i{width:11px;height:11px;border-radius:1px;display:inline-block}

/* record pages: two columns on wide screens, one on narrow. Previously these
   grids were inline with no breakpoint, so the map column kept shrinking. */
.rec-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:24px;align-items:start;margin-top:26px}
@media (max-width:960px){
  .rec-grid{grid-template-columns:1fr;gap:20px}
  .pmap-cap{font-size:.74rem}
}
@media (max-width:560px){
  .pmap-cap{flex-direction:column;gap:8px}
  .pmap-key{gap:10px}
}

/* permit type counts on the zip page */
.ptypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.ptype{background:var(--surface);padding:13px 14px}
.ptype-n{font-size:1.3rem;font-weight:500;color:var(--accent-ink);
  font-variant-numeric:tabular-nums}
.ptype-l{font-size:.8rem;color:var(--muted);margin-top:2px;line-height:1.35}

/* --- homepage typeahead ------------------------------------------------- */
.ac{position:relative}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;
  background:var(--surface);border:1px solid var(--rule-strong);border-radius:3px;
  box-shadow:0 18px 44px -16px rgba(0,0,0,.55);overflow:hidden;display:none;
  max-height:340px;overflow-y:auto}
.ac-list[data-open="1"]{display:block}
.ac-item{display:flex;gap:12px;align-items:baseline;padding:10px 14px;cursor:pointer;
  border-top:1px solid var(--rule);background:none;border-left:0;border-right:0;
  border-bottom:0;width:100%;text-align:left;font:inherit;color:var(--ink)}
.ac-item:first-child{border-top:0}
.ac-item[aria-selected="true"],.ac-item:hover{background:var(--accent-wash)}
.ac-a{flex:1;min-width:0;font-weight:600;font-size:.95rem;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ac-a b{font-weight:700;color:var(--accent-ink)}
.ac-m{font-family:var(--f-mono);font-size:.76rem;color:var(--muted);white-space:nowrap}
.ac-empty{padding:13px 14px;color:var(--muted);font-size:.9rem}
.ac-foot{padding:8px 14px;border-top:1px solid var(--rule);background:var(--surface-2);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;gap:10px}

/* breadcrumbs */
.crumbs{border-bottom:1px solid var(--rule);background:var(--surface)}
.crumbs ol{list-style:none;margin:0;padding:9px 0;display:flex;flex-wrap:wrap;
  gap:7px;font-size:.82rem;color:var(--muted)}
.crumbs li{display:flex;gap:7px;align-items:center}
.crumbs li+li::before{content:"/";color:var(--faint)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}

/* --- permit / contractor point maps -------------------------------------- */
.cmap{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#221812}
.cmap img{width:100%;height:auto;display:block}
.cmap-legend{background:var(--surface);border-top:1px solid var(--rule);
  padding:11px 14px;display:flex;gap:8px;flex-wrap:wrap}
.cat{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--rule);
  border-radius:2px;padding:4px 9px;font-size:.82rem;background:var(--surface);
  cursor:default}
.cat i{width:9px;height:9px;border-radius:50%;flex:none}
.cat b{font-family:var(--f-mono);font-weight:500;font-size:.78rem;color:var(--muted)}
.cmap-note{background:var(--surface);border-top:1px solid var(--rule);
  padding:9px 14px;font-size:.78rem;color:var(--muted);line-height:1.45}
.demo-flag{background:var(--caution-wash);color:var(--caution);
  border-top:1px solid var(--rule);padding:9px 14px;font:500 .78rem var(--f-body)}

/* the home: headline facts about the house itself */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:3px;overflow:hidden}
.facts>div{background:var(--surface);padding:13px 14px}
.fact-n{font-size:1.45rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.fact-l{font-size:.78rem;color:var(--muted);margin-top:2px}
.chip-ok{background:var(--ok-wash);color:var(--ok)}