/* Landlord Dispatch, step 8 comps. One file, no framework.
   Colors and type come from design/brand-2026-11-05/dir-letter-plate-V2/notes.md. Nothing invented here.
   Besley: the plate's moments only (H1, the big date, door codes, big numbers). Georgia: everything you read.
   System sans: labels. Yellow marks a start date and nothing else. */

/* Besley is self-hosted, no third-party font request. Georgia where the device has it; Gelasio (same metrics) where it does not. */
@font-face{font-family:Besley;src:url(/assets/fonts/besley-700-800.woff2) format("woff2");font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:Georgia;src:local("Georgia"),url(/assets/fonts/gelasio.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Georgia;src:local("Georgia Bold"),local("Georgia-Bold"),url(/assets/fonts/gelasio.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Georgia;src:local("Georgia Italic"),local("Georgia-Italic"),url(/assets/fonts/gelasio-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Georgia;src:local("Georgia Bold Italic"),local("Georgia-BoldItalic"),url(/assets/fonts/gelasio-italic.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{
  --page:#E8E5DE;--paper:#FBF8F0;--door:#F2EDE0;--plate:#DCD3C1;--rule:#DCD3C1;
  --ink:#23221F;--muted:#5D584F;--accent:#B8391C;--hl:#F3DE55;--hl-ink:#23221F;
  --slot:#23221F;--sheet:#FBF8F0;--slot-edge:transparent;
  --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2323221F' stroke-width='1.8'/%3E%3C/svg%3E");
  --serif:Georgia,'Times New Roman',Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --drawn:Besley,Georgia,'Times New Roman',Times,serif;
  --gutter:22px;--sec:44px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --page:#121110;--paper:#1A1916;--door:#24221E;--plate:#3A372F;--rule:#3A372F;
    --ink:#EFEADF;--muted:#B4AD9F;--accent:#F4957A;--hl:#5A5018;--hl-ink:#F6EFD6;
    --slot:#0B0A09;--sheet:#2E2B25;--slot-edge:#EFEADF;
    --chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23EFEADF' stroke-width='1.8'/%3E%3C/svg%3E");
  }
}
@media (min-width:640px){:root{--gutter:40px;--sec:56px}}
/* One grid from 1040 up: the left column is the plate's width, and the right column starts where the state table's fourth column does. */
:root{--grid:minmax(0,640fr) minmax(0,484fr);--grid-gap:76px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--page)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--serif);overflow-wrap:break-word}
@media (min-width:640px){body{font-size:18px;line-height:1.65}}
img{display:block;max-width:100%;height:auto;border:0}
p{margin:0 0 18px}
ul,ol{margin:0 0 18px;padding:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:5;padding:10px 14px;background:var(--ink);color:var(--paper);font:700 14px/1.4 var(--sans)}
.skip:focus{left:8px;top:8px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap{max-width:1280px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
[hidden]{display:none !important}

/* Marker: a placeholder or an unread line, never mistakable for a checked fact. */
.mark{font:400 12.5px/1.45 var(--sans);color:var(--muted);letter-spacing:0;font-style:normal}
.nw,.mark--short{white-space:nowrap}

/* ---------- The door and the plate ---------- */
/* Under 640: the plate runs edge to edge, as it does in the email. 640 to 1039: a fixed 600, the door still runs on behind it.
   1040 and up: 640, the size of a plate on a door, never wider at any screen; live text takes the rest of the door. */
.plate{display:block;background:var(--door);line-height:0}
.plate img{width:100%}
.mast-text{padding:16px var(--gutter) 0}
.tagline{margin:0;font:400 18px/1.4 var(--serif);color:var(--ink)}
.note{margin:3px 0 0;font:italic 400 15px/1.4 var(--serif);color:var(--accent)}
.indep{margin:6px 0 0;font:400 14.5px/1.5 var(--serif);color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:0 20px;margin:2px 0 -2px;font:700 14px/1.3 var(--sans)}
.nav a{display:inline-block;padding:13px 0;color:var(--ink);text-decoration:none}
.nav a:hover,.nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em}
.mast-rule{border:0;border-top:2px solid var(--ink);margin:0}
.mast--compact .plate{padding:8px var(--gutter) 6px}
.mast--compact .plate img{width:min(100%,264px)}
@media (min-width:640px){
  .plate{padding:20px var(--gutter) 16px}
  .plate img{width:600px}
  .mast--compact .plate{padding:14px var(--gutter) 12px}
  .mast--compact .plate img{width:320px}
  .mast-text{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;align-items:baseline}
  .tagline{grid-column:1}.note{grid-column:2;grid-row:1;margin:0;text-align:right}
  .indep{grid-column:1}.nav{grid-column:1/-1}
}
@media (min-width:1040px){
  .mast{background:var(--door)}
  .mast-in{max-width:1280px;margin:0 auto;padding:40px var(--gutter) 34px;display:grid;grid-template-columns:var(--grid);column-gap:var(--grid-gap);align-items:end}
  .plate{padding:0;background:none}.plate img{width:calc(100% + 12px);max-width:none;margin-left:-6px}
  .mast-text{display:block;padding:0 0 4px}
  .note{margin:3px 0 0;text-align:left}
  .nav{margin:10px 0 -13px}
  .mast--compact .mast-in{padding:18px var(--gutter) 16px;grid-template-columns:280px minmax(0,1fr);column-gap:40px;align-items:center}
  .mast--compact .plate{padding:0}.mast--compact .plate img{width:286px;max-width:none;margin-left:-3px}
  .mast--compact .mast-text{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;padding:0;align-items:baseline}
  .mast--compact .note{grid-column:2;grid-row:1;margin:0;text-align:right}
  .mast--compact .nav{grid-column:2;grid-row:2;margin:0;justify-self:end}
  .mast--compact .nav a{padding:6px 0}
  .mast--compact .indep{margin:2px 0 0}
}
@media (min-width:1200px){
  .mast--compact .mast-in{grid-template-columns:320px minmax(0,1fr);column-gap:48px}
  .mast--compact .plate img{width:326px}
}

/* ---------- Type ---------- */
h1,h2,h3{margin:0;font-family:var(--serif);color:var(--ink)}
h1{font:700 34px/1.14 var(--drawn);letter-spacing:-.01em;text-wrap:balance}
h2{font:700 22px/1.2 var(--serif);margin:0 0 14px}
h3{font:italic 700 20px/1.25 var(--serif);margin:0 0 12px}
@media (min-width:640px){
  h1,.home-lead h1{font-size:48px}
  h2{font-size:26px;margin-bottom:18px}
  h3{font-size:21px}
}
.lede{font-size:19px;line-height:1.5}
@media (min-width:640px){.lede{font-size:22px;line-height:1.45}}
.kicker{margin:0 0 8px;font:700 12px/1.4 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.seclabel{margin:0 0 16px;padding-bottom:9px;border-bottom:1px solid var(--rule);font:700 12.5px/1.3 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink)}
.basis{color:var(--muted);font-size:15px;line-height:1.55}
.tiny{font-size:15px;line-height:1.55;color:var(--muted)}

/* Yellow Date, small: the email's swipe. */
.yd{font-weight:700;white-space:nowrap;padding:0 3px;color:var(--hl-ink);
  background:linear-gradient(transparent 22%,var(--hl) 22%,var(--hl) 89%,transparent 89%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
@media (prefers-color-scheme:dark){.yd{background:var(--hl)}.row-date .yd{display:inline-block;line-height:1.08}}

/* Yellow Date, big: the picture. A hand swipe with uneven ends, so at this size it stays a swipe and never turns into a filled box. */
.swipe{position:relative;z-index:0;display:inline-block;color:var(--hl-ink);padding:0 .04em;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
.swipe::before{content:"";position:absolute;z-index:-1;left:-.05em;right:-.07em;top:.3em;bottom:.07em;background:var(--hl);
  clip-path:polygon(.5% 8%,99.3% 0,100% 90%,0 100%);
  -webkit-print-color-adjust:exact;print-color-adjust:exact}

/* The H1 on the hub and the state page: the same words, with the date as the picture. */
.h-pic{font:700 26px/1.2 var(--drawn);letter-spacing:-.005em}
.h-pic .h-line{display:block}
.h-pic .h-date{display:block;margin:.02em 0 .04em;font:800 14.3vw/1.08 var(--drawn);letter-spacing:-.025em;white-space:nowrap}
.h-pic .h-date .after{font-size:.42em;letter-spacing:0;margin-left:.02em}
.h-pic .h-year{font-size:33vw;line-height:1}
.h-pic .swipe.sm{padding:0 .08em}
@media (min-width:640px){
  .h-pic{font-size:34px}
  .h-pic .h-date{font-size:92px}
  .h-pic .h-year{font-size:170px}
}
@media (min-width:1040px){
  .h-pic{font-size:36px}
  .h-pic .h-date{font-size:clamp(82px,8.4vw,108px)}
  .h-pic .h-year{font-size:clamp(150px,16.5vw,212px)}
}

.legal{margin:0;padding:18px 0 17px;border-bottom:1px solid var(--rule);color:var(--ink);text-wrap:pretty}
.legal b{font-weight:700}
.hero{display:block;padding:26px 0 8px}
.hero .side{margin-top:20px}
.hero .side p:last-child{margin-bottom:0}
@media (min-width:1040px){
  .hero{display:grid;grid-template-columns:var(--grid);column-gap:var(--grid-gap);align-items:end;padding:34px 0 12px}
  .hero .side{margin:0 0 8px}
}

/* ---------- Forms ---------- */
.signup{margin:0}
.field{margin:0 0 16px}
.field label{display:block;margin:0 0 5px;font:700 14.5px/1.4 var(--sans);color:var(--ink)}
.help{margin:0 0 7px;font:400 15px/1.45 var(--serif);color:var(--muted)}
input[type=email],input[type=text],select{display:block;width:100%;min-height:50px;padding:10px 12px;font:400 18px/1.3 var(--serif);color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;-webkit-appearance:none;appearance:none}
select{padding-right:34px;background-image:var(--chev);background-repeat:no-repeat;background-position:right 12px center}
button{display:inline-block;min-height:50px;padding:11px 22px;font:700 18px/1.25 var(--serif);color:var(--paper);background:var(--ink);border:1.5px solid var(--ink);border-radius:0;cursor:pointer}
button:hover{background:var(--paper);color:var(--ink)}
.under{margin:12px 0 0;font:400 15px/1.5 var(--serif);color:var(--muted)}
.elsewhere{margin:2px 0 0;font:400 17px/1.55 var(--serif);color:var(--ink)}
.signup .mark{display:block;margin-top:8px}
.signup-box{border-top:2px solid var(--ink);padding-top:22px}
.signup-box .say{font-size:20px;line-height:1.45}
@media (min-width:640px){
  .signup--row .fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px}
  .signup-box .say{font-size:22px}
}
@media (min-width:1040px){
  .signup-box{display:grid;grid-template-columns:var(--grid);column-gap:var(--grid-gap)}
  .signup--row .fields{display:block}
}

/* ---------- Home ---------- */
.home-grid{padding-top:24px}
.home-lead h1{font-size:30px}
.home-lead h1 .then{display:block}
.home-lead .lede{margin:16px 0 26px}
.home-grid>.signup{margin-bottom:var(--sec)}
.home-grid section{margin:0 0 36px}
.home-grid section p:last-child{margin-bottom:0}
.card{margin:0 0 36px;padding:16px 0 18px;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
@media (min-width:1040px){
  /* Left stack and right stack run on their own heights, so the form never leaves a hole under the promise. */
  .home-grid{display:grid;grid-template-columns:var(--grid);grid-template-rows:auto auto auto auto auto auto 1fr;column-gap:var(--grid-gap);padding-top:44px;align-items:start}
  .home-lead{grid-column:1;grid-row:1;margin-bottom:44px}
  .home-lead h1{font-size:clamp(36px,3.5vw,44px)}
  .home-lead .lede{margin:22px 0 0;font-size:24px;line-height:1.42}
  .home-grid>.signup{grid-column:2;grid-row:1/span 2;margin:0}
  .home-grid section{grid-column:1;margin-bottom:38px}
  .card{grid-column:2;grid-row:3/-1;margin:0;border-bottom:0;padding-bottom:0}
}
.read-first{border-top:2px solid var(--ink);padding-top:22px}
.read-first p{margin:0 0 10px}
@media (min-width:1040px){.home-grid .read-first{grid-column:1;margin:8px 0 0}}

/* The Card: the email's Card on paper. Run-in labels above prose, no box. */
.card-title{font:700 22px/1.2 var(--serif);font-style:normal;margin:0 0 10px}
.card-starts{margin:0 0 22px;font:700 18px/1.4 var(--serif)}
.fields-l{margin:0}
.fields-l dt{margin:0 0 5px;font:700 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fields-l dd{margin:0 0 20px;font-size:17px;line-height:1.6}
.card-note{margin:22px 0 0;font:italic 400 15px/1.6 var(--serif);color:var(--muted)}
@media (min-width:640px){.card-title{font-size:26px}}

/* ---------- Hub: the Eight Doors ---------- */
.doors{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.doors li{display:flex;min-width:0}
.door{position:relative;display:flex;flex-direction:column;width:100%;min-height:178px;border:1.5px solid var(--ink);background:var(--sheet-door,var(--paper));color:var(--ink);text-decoration:none;overflow:hidden}
.door-strip{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px 7px;border-bottom:1.3px solid var(--ink)}
.door-code{font:800 25px/1 var(--drawn);letter-spacing:0}
.door-name{font:700 12.5px/1.2 var(--sans);text-align:right}
.door--mail .door-strip{background:var(--ink);color:var(--paper)}
.door-body{position:relative;display:flex;flex-direction:column;flex:1;padding:10px 9px 9px}
.door-slot{position:relative;z-index:2;display:block;height:7px;border-radius:4px;background:var(--slot);box-shadow:0 0 0 1px var(--slot-edge)}
.door-letter{position:relative;z-index:1;display:block;margin:-4px 2px 0;padding:13px 6px 9px;background:var(--sheet);border:1.5px solid var(--ink);transform:rotate(-1.4deg);transform-origin:50% 0;transition:transform .16s ease-out}
.door-letter::after{content:"";position:absolute;top:11px;right:8px;width:13px;height:15px;background:var(--ink);outline:1px solid var(--sheet);outline-offset:-3px}
.door:hover .door-letter{transform:translateY(4px) rotate(-1.4deg)}
.door-next{display:block;font:700 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.door-date{display:block;margin:3px 0 4px;font:800 calc(8vw - 10.4px)/1.2 var(--drawn);letter-spacing:-.015em;white-space:nowrap}
.door-date .swipe::before{top:.1em;bottom:.04em}
.door-count{display:block;font:400 15px/1.35 var(--serif)}
.door-quiet{display:block;padding:12px 2px 0;text-align:center}
.door-quiet .door-next{letter-spacing:0;text-transform:none;font:400 15px/1.35 var(--serif);color:var(--muted)}
.door .mark{display:block;margin-top:auto;padding-top:7px;text-align:center}
.door-key{display:block;position:relative;width:7px;height:14px;margin:auto auto 2px}
.door .mark + .door-key{margin-top:6px}
.door-key::before{content:"";position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.door-key::after{content:"";position:absolute;left:2.25px;top:4px;width:2.5px;height:10px;background:var(--ink)}
@media (min-width:480px){.door-date{font-size:26px}.door-letter{margin:-4px 8px 0;padding:13px 10px 9px}}
@media (min-width:760px){
  .doors{grid-template-columns:repeat(4,minmax(0,1fr))}
  .door-date{font-size:clamp(18px,2.55vw,31px)}
  .door-letter{margin:-4px 4px 0;padding:13px 7px 9px}
}
@media (min-width:1040px){
  .doors{gap:14px;margin-top:30px}
  .door{min-height:230px}
  .door-strip{padding:9px 13px 10px}
  .door-code{font-size:32px}
  .door-name{font-size:14px}
  .door-body{padding:13px 13px 12px}
  .door-slot{height:9px;border-radius:5px}
  .door-letter{margin:-5px 8px 0;padding:18px 14px 13px}
  .door-letter::after{top:14px;right:12px;width:16px;height:19px}
  .door-count{font-size:17px}
  .door-quiet .door-next{font-size:17px}
  .door-quiet{padding-top:20px}
}

.lines{list-style:none;margin:0;padding:0}
.lines li{padding:16px 0 15px;border-top:1px solid var(--rule);scroll-margin-top:12px}
.lines li:first-child{border-top:2px solid var(--ink)}
.lines li:target{background:var(--door);box-shadow:-10px 0 0 var(--door),10px 0 0 var(--door)}
.lines p{margin:0}
.lines .st{font-weight:700}
.lines a.st{color:inherit}
@media (min-width:1040px){
  .lines{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:14px}
  .lines li{padding-right:42px}
  .lines li:nth-child(5){border-top:2px solid var(--ink)}
}

.sec{margin-top:var(--sec)}
.sec p:last-child{margin-bottom:0}

/* ---------- State page: the laws ---------- */
.laws{width:100%;border-collapse:collapse;margin:0}
.laws th,.laws td{text-align:left;vertical-align:top;font-weight:400}
.cell-label{display:block;margin:0 0 5px;font:700 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.row-date{display:block;font:800 25px/1.25 var(--drawn);letter-spacing:-.012em}
.row-date .yd{font-weight:800;color:var(--hl-ink)}
.laws .basis{display:block;margin-top:5px}
.c-law{font-size:17px;line-height:1.5}
.c-law b{font-weight:700}
.anchor{display:block;margin-top:5px;font:400 12.5px/1.4 var(--sans);color:var(--muted);text-decoration:none}
.anchor:hover{text-decoration:underline}
.laws tbody tr{scroll-margin-top:12px}
.laws tbody tr:target{background:var(--door);box-shadow:-10px 0 0 var(--door),10px 0 0 var(--door)}
.laws .also{display:block;height:0;scroll-margin-top:12px}
@media (max-width:1199.98px){
  .laws,.laws tbody,.laws tr,.laws td,.laws th{display:block}
  .laws thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .laws tbody tr{padding:24px 0 8px;border-top:2px solid var(--ink)}
  .laws td,.laws th{margin:0 0 18px;padding:0}
  .laws tbody tr:last-child{border-bottom:1px solid var(--rule)}
}
@media (min-width:640px) and (max-width:1199.98px){
  .laws tbody tr{display:grid;grid-template-columns:200px minmax(0,1fr);column-gap:28px}
  .c-start{grid-column:1;grid-row:1/span 4}
  .c-law,.c-what,.c-who,.c-text{grid-column:2}
}
@media (min-width:1200px){
  .laws{table-layout:fixed}
  .cell-label{display:none}
  .laws thead th{padding:0 18px 9px 0;font:700 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
  .laws thead th:last-child,.laws tbody td:last-child{padding-right:0}
  .laws tbody td,.laws tbody th{padding:20px 22px 22px 0;border-bottom:1px solid var(--rule);font-size:16px;line-height:1.52}
  .laws thead th:nth-child(1){width:16.7%}
  .laws thead th:nth-child(2){width:14.6%}
  .laws thead th:nth-child(3){width:28.4%}
  .laws thead th:nth-child(4){width:23.3%}
  .laws .c-law{font-size:16px}
  .row-date{font-size:25px}
}
.under-table{margin:14px 0 0;font:italic 400 15px/1.6 var(--serif);color:var(--muted)}
.two{display:block}
.two>*{margin-bottom:36px}
.two>*:last-child{margin-bottom:0}
@media (min-width:1040px){
  .two{display:grid;grid-template-columns:var(--grid);column-gap:var(--grid-gap)}
  .two>*{margin-bottom:0}
}
.bignum{display:block;margin:0 0 10px;font:800 40px/1.1 var(--drawn);letter-spacing:-.015em}
@media (min-width:640px){.bignum{font-size:46px}}
.print-url{display:none}

/* ---------- Reading pages: heads hang in a rail on wide screens ---------- */
.read h1{margin:26px 0 26px}
.rd{margin:0 0 34px}
.rd>*:last-child{margin-bottom:0}
.rd ul{list-style:none}
.rd li{position:relative;margin:0 0 10px;padding-left:18px}
.rd li::before{content:"";position:absolute;left:0;top:.68em;width:7px;height:2px;background:var(--ink)}
.rd blockquote{margin:0 0 18px;font-size:20px;line-height:1.55}
.rd .table-wrap{margin:0 0 12px}
@media (min-width:1040px){
  .read{display:block}
  .read h1{margin:44px 0 34px}
  .rd{display:grid;grid-template-columns:260px minmax(0,700px);column-gap:56px;margin:0 0 44px}
  .rd>h2{grid-column:1;grid-row:1/span 40;margin:0;font-size:24px}
  .rd>*:not(h2){grid-column:2}
  .rd.nohead>*{grid-column:2}
}

/* ---------- Cap Lookup ---------- */
.rd--sum{border-top:2px solid var(--ink);padding-top:22px}
.sum-form{margin:0}
.sum-form .field{max-width:520px}
.money{position:relative}
.money span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font:400 18px/1 var(--serif);color:var(--ink)}
.money input{padding-left:26px}
.result{margin:26px 0 0;padding-top:20px;border-top:2px solid var(--ink)}
.result:focus{outline:0}
.result-line{margin:0 0 14px;font:700 25px/1.25 var(--drawn);letter-spacing:-.005em}
.result-under{margin:0 0 14px;font-size:16px;line-height:1.55;color:var(--muted)}
@media (min-width:640px){.result-line{font-size:30px}}
.plain-table{width:100%;max-width:620px;border-collapse:collapse;font-size:17px}
.plain-table th,.plain-table td{padding:9px 16px 9px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule);font-weight:400}
.plain-table thead th{font:700 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink)}
.plain-table td:last-child,.plain-table th:last-child{padding-right:0;text-align:right;white-space:nowrap}
.plain-table td:last-child{font-weight:700}

/* ---------- Archive ---------- */
.arc{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.rd .arc>li,.rd .arc-states li{margin:0;padding-left:0}
.rd .arc>li::before,.rd .arc-states li::before{display:none}
.rd .arc>li{padding:18px 0 16px;border-bottom:1px solid var(--rule)}
.arc-no{display:block;font:800 30px/1.15 var(--drawn);letter-spacing:-.01em}
.arc-sub{display:block;margin:2px 0 8px;font:700 12.5px/1.5 var(--sans);letter-spacing:.05em;color:var(--muted)}
.arc-states{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 20px}

/* ---------- The issue on the web: a sheet on the desk, the email fragment unchanged ---------- */
.desk{background:var(--page);padding:0 0 var(--sec);margin-bottom:calc(var(--sec) * -1)}
.issue-line{padding-top:22px;padding-bottom:20px;max-width:680px;margin:0 auto}
.issue-line h1{font:700 12.5px/1.5 var(--sans);letter-spacing:.05em;color:var(--muted);margin:0 0 6px}
.issue-line p{margin:0;font-size:16px;line-height:1.55}
.issue-line .sample{display:inline-block;margin:0 8px 0 0;font:700 12.5px/1.5 var(--sans);letter-spacing:.05em;color:var(--accent)}
.sheet{max-width:600px;margin:0 auto;background:var(--paper)}
.issue-below{max-width:680px;margin:0 auto;padding-top:30px}
.nl-paper{background-color:var(--paper)}
@media (max-width:620px){
  .nl-pad{padding-left:22px !important;padding-right:22px !important}
  .nl-sec{padding-top:44px !important}
  .nl-body{font-size:17px !important;line-height:1.6 !important}
  .nl-h2{font-size:22px !important}
  .nl-h3{font-size:20px !important}
  .nl-num{font-size:46px !important}
  .lp-head{font-size:16px !important}
  .lp-stack{display:block !important;width:auto !important}
  .lp-note{text-align:left !important;padding-top:3px !important}
  .lp-sep{display:none !important}
  .lp-blk{display:block !important}
  .lp-big{font-size:28px !important}
  .lp-sub{font-size:16px !important}
  .lp-strip{padding-left:16px !important;padding-right:12px !important}
}
@media (prefers-color-scheme:dark){
  .nl-paper{background-color:#1A1916 !important}
  .lp-door{background-color:#24221E !important}
  .nl-ink{color:#EFEADF !important}
  .nl-muted{color:#B4AD9F !important}
  .nl-accent,.nl-link{color:#F4957A !important}
  .nl-hl{background-color:#5A5018 !important;background-image:none !important;color:#F6EFD6 !important}
  .nl-rule{border-color:#3A372F !important}
}

/* ---------- Footer: four lines, in order ---------- */
.foot{margin-top:var(--sec);background:var(--page);border-top:1px solid var(--rule)}
.foot .wrap{padding-top:24px;padding-bottom:30px}
.foot p{margin:0 0 8px;max-width:760px;font:400 13px/1.55 var(--sans);color:var(--muted)}
.foot p:last-child{margin-bottom:0}
.foot a{color:var(--muted);text-decoration:underline}
.foot a:hover{color:var(--ink)}
.foot .links a{display:inline-block;padding:7px 0}
@media (min-width:640px){.foot .links a{padding:0}}

@media (prefers-reduced-motion:reduce){.door-letter{transition:none}}

/* ---------- Print: the state page goes to a co-owner on one or two sheets ---------- */
@media print{
  @page{size:letter;margin:.5in .55in .55in}
  :root{--page:#fff;--paper:#fff;--door:#fff;--plate:#DCD3C1;--rule:#B9B2A3;--ink:#000;--muted:#3f3c36;--accent:#000;--hl:#F3DE55;--hl-ink:#000;--sheet:#fff;--slot:#000;color-scheme:light}
  html,body{background:#fff;color:#000;font-size:10pt;line-height:1.38}
  .wrap{max-width:none;padding:0}
  .skip,.nav,.mast-rule,.note,.signup,.signup-box,.foot .links,.mark.no-print,.anchor{display:none !important}
  .mast,.plate{background:none !important}
  .mast-in{display:flex !important;align-items:center;gap:.2in;padding:0 !important}
  .plate{padding:0 !important}.plate img{width:2.1in !important}
  .mast-text{display:block !important;padding:0 !important}
  .tagline{font-size:10pt}.indep{font-size:9pt;margin:0}
  .print-url{display:block;margin:2pt 0 0;font:400 8.5pt/1.3 var(--sans)}
  .legal{padding:7pt 0 6pt;font-size:10pt;font-weight:700;border-bottom:1pt solid #000}
  .hero{display:block !important;padding:7pt 0 4pt}
  .hero .side{margin:4pt 0 0}.hero .side p{margin:0;font-size:10pt}
  .h-pic{font-size:14pt}.h-pic .h-date{font-size:40pt;line-height:1.1;letter-spacing:-.02em}
  .sec{margin-top:10pt}
  h2{font-size:12pt;margin:0 0 4pt}
  a{color:#000;text-decoration:none}
  .laws,.laws tbody,.laws tr,.laws td,.laws th{display:block}
  .laws thead{display:none}
  .laws tbody tr{display:grid;grid-template-columns:1.32in minmax(0,1fr);column-gap:.16in;padding:6pt 0 2pt;border-top:1pt solid #000;break-inside:avoid;page-break-inside:avoid;box-shadow:none;background:none}
  .laws td,.laws th{margin:0 0 3pt;padding:0;border:0;font-size:9.4pt;line-height:1.34}
  .c-start{grid-column:1;grid-row:1/span 4}
  .c-law,.c-what,.c-who,.c-text{grid-column:2}
  .c-law b{font-size:10pt}
  .cell-label{display:inline;margin:0 3pt 0 0;font-size:6.6pt;color:#000}
  .c-start .cell-label{display:block}
  .row-date{font-size:14pt;line-height:1.2}
  .laws .basis{font-size:8pt;line-height:1.25;margin-top:2pt}
  .c-text a::after{content:" " attr(href);font:400 6.8pt/1.2 var(--sans);white-space:nowrap;color:#222}
  .under-table{font-size:8.5pt;margin:4pt 0 0}
  .two{display:grid !important;grid-template-columns:1fr 1fr;column-gap:.25in}
  .two p{font-size:9pt;margin:0}.two>*{margin:0}
  .bignum{font-size:16pt;margin:0 0 2pt}
  .foot{margin-top:8pt;background:none;border-top:1pt solid #000}
  .foot .wrap{padding:5pt 0 0}
  .foot p{max-width:none;margin:0 0 1pt;font-size:7.8pt;line-height:1.25;color:#000}
}


/* ==== Step 9 additions, 2026-11-05. Everything above this line is the approved site.css, unchanged. ==== */

/* ---------- Form V2 ---------- */
.err{margin:6px 0 0;font:700 14.5px/1.4 var(--sans);color:var(--accent)}
@media (hover:none){button:hover{background:var(--ink);color:var(--paper)}} /* a tap leaves :hover stuck on a phone, and the button must stay ink beside the error */
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.under.offer{margin-top:6px;color:var(--ink)}
.under.more{margin-top:6px}
.signup noscript .elsewhere{margin-top:12px}
.signup--row .fields{align-items:end}

/* ---------- Home V2: the phone fold. Only the home page, only under 640. ---------- */
@media (max-width:639.98px){
  .mast--home .plate{padding:8px var(--gutter) 6px}
  .mast--home .plate img{width:min(100%,264px)}
  .mast--home .mast-text{padding-top:9px}
  .mast--home .tagline{line-height:1.25}
  .mast--home .note{margin-top:1px;line-height:1.25}
  .mast--home .indep{margin-top:1px;line-height:1.3}
  .mast--home .nav{margin:0}
  .mast--home .nav a{padding:9px 0 10px}
  .home-grid{padding-top:14px}
  .home-lead h1{font-size:24.5px;line-height:1.16}
  .home-lead .lede{margin:9px 0 13px;font-size:17px;line-height:1.42}
  .home-grid .field{margin-bottom:10px}
  .home-grid .field label{margin-bottom:3px}
  .home-grid .help{margin-bottom:4px;font-size:14.5px;line-height:1.35}
  .home-grid input[type=email],.home-grid select{min-height:46px;padding:7px 12px}
  .home-grid select{padding-right:34px}
}

/* ---------- The deposit chart on screen. The number is the picture; ink only, yellow means a start date. ---------- */
:root{--dep-col:76px;--dep-gap:12px}
@media (max-width:359.98px){:root{--dep-col:64px;--dep-gap:10px}}
@media (min-width:640px){:root{--dep-col:118px;--dep-gap:18px}}
.chart-plate{display:none}
.chart h1{margin:24px 0 12px}
@media (max-width:639.98px){.chart h1 .t2{display:block}}
.chart-intro{font-size:19px;line-height:1.5;margin:0 0 16px}
.chart-legal{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:14px 0 13px;margin:0 0 22px}
.chart-legal b{font-weight:700}
.dep-key{display:grid;grid-template-columns:var(--dep-col) minmax(0,1fr);column-gap:var(--dep-gap);padding:0 0 8px;border-bottom:2px solid var(--ink)}
.dep-key p{grid-column:2;margin:0;font:700 11px/1.45 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dep-key p+p{font-weight:400}
.dep{list-style:none;margin:0;padding:0}
.dep-row{display:grid;grid-template-columns:var(--dep-col) minmax(0,1fr);column-gap:var(--dep-gap);padding:15px 0 16px;border-bottom:1px solid var(--rule);scroll-margin-top:12px}
.dep-row:target{background:var(--door);box-shadow:-10px 0 0 var(--door),10px 0 0 var(--door)}
.dep-n{display:block;font:800 54px/.9 var(--drawn);letter-spacing:-.025em;color:var(--ink)}
.dep-n span{display:block}
.dep-n .or{margin:5px 0 7px;font:italic 400 16px/1 var(--serif);letter-spacing:0;color:var(--ink)}
.dep-line{margin:0;line-height:1.5}
.dep-cite{margin:7px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.rd .dep-row{margin:0;padding-left:0}
.rd .dep-row::before{display:none}
.dep-check{margin:18px 0 0}
.dep-more{margin:12px 0 0;font-weight:700}
.chart-tail{margin-top:20px}
.chart-check{margin:0 0 12px}
.chart-check b{font-weight:700}
.chart-print{margin:0 0 12px;font-weight:700}
.chart-foot{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.chart-invite{display:none}
@media (max-width:359.98px){.dep-n{font-size:46px}}
@media (min-width:640px){
  .dep-n{font-size:84px}
  .dep-n .or{margin:6px 0 9px;font-size:18px}
}
@media (min-width:1040px){
  /* Two stacks that run on their own heights, as on the home page. Floats, so the DOM order stays the print order. */
  .chart{padding-top:44px}
  .chart::after{content:"";display:block;clear:both}
  .chart-head,.chart-body{float:left;clear:left;width:calc((100% - var(--grid-gap)) * .5694)}
  .chart-side,.chart-tail{float:right;clear:right;width:calc((100% - var(--grid-gap)) * .4306)}
  .chart-head h1{margin:0 0 30px}
  .chart-side{margin:5px 0 26px}
  .chart-legal{margin-bottom:0}
  .chart-intro{font-size:18px;line-height:1.5}
  .chart-tail{margin:0}
  .dep-state .dep{max-width:calc((100% - var(--grid-gap)) * .5697)}
}

/* The state page: one row of the chart, under the dated rows. The date stays the picture: small number, no swipe. */
.dep-state .dep{border-top:2px solid var(--ink)}
.dep-state .dep-row{grid-template-columns:62px minmax(0,1fr);column-gap:10px;border-bottom:0;padding-bottom:0}
.dep-state .dep-n{font-size:40px}
.dep-state .dep-check,.dep-state .dep-more{padding-left:72px;margin-top:12px}
.dep-state .dep-more{margin-top:6px}
@media print{
  .dep-state{margin-top:8pt}
  .dep-state .dep{max-width:none;border-top:1pt solid #000}
  .dep-state .dep-row{display:grid;grid-template-columns:.5in minmax(0,1fr);column-gap:.1in;padding:5pt 0 0}
  .dep-state .dep-n{font-size:24pt}
  .dep-state .dep-line{font-size:9.4pt;line-height:1.34}
  .dep-state .dep-cite{margin-top:1pt;font-size:8pt}
  .dep-state .dep-check,.dep-state .dep-more{margin:1pt 0 0;padding-left:.6in;font-size:8pt;line-height:1.25}
  .dep-state .dep-more{font-weight:400}
  .dep-state .dep-more a::after{content:" landlorddispatch.com/deposits/"}
}

/* Pages that take their words from the chart: the page after the form, the page after the click */
.check-h{margin:30px 0 8px;font:400 21px/1.45 var(--serif);letter-spacing:0;text-wrap:pretty}
.check-big{display:block;margin:0 0 12px;font:700 40px/1.1 var(--drawn);letter-spacing:-.012em}
.check-rest{display:block;max-width:640px}
.rd--tight{margin-bottom:30px}
.rd--tight .lede{margin:0 0 8px}
.rd--tight .mark{display:block}
.addr{-webkit-user-select:all;user-select:all;white-space:nowrap}
.read .chart-legal{margin:0 0 22px}
@media (min-width:640px){
  .check-big{font-size:64px}
  .check-h{font-size:24px;margin:44px 0 14px}
}

/* ---------- The chart's print: same page as deposits.html. Letter or A4, whatever the printer holds. ---------- */
@page chart{size:auto;margin:.38in .5in .34in}
@media print{
  .page-chart{page:chart}
  .page-chart .wrap{padding:0}
  .page-chart .skip,.page-chart .mast,.page-chart .signup-box,.page-chart .foot,.page-chart .chart-print{display:none !important}
  .chart{display:grid;grid-template-columns:2.3in minmax(0,1fr);column-gap:.2in;width:7.1in;margin:0 auto;padding:0;color:#000;font:400 10.8pt/1.28 var(--serif)}
  .chart-plate{display:block;grid-column:1;width:100%;height:auto;margin:0}
  .chart-head{grid-column:2;align-self:center}
  .chart h1{margin:0;font:700 22pt/1.12 var(--drawn);letter-spacing:-.012em;color:#000;text-wrap:initial}
  .chart h1 .t2{display:block}
  .chart-side,.chart-body,.chart-tail{grid-column:1/-1}
  .chart-side{margin:7pt 0 0}
  .chart-intro{margin:0;font-size:11pt;line-height:1.3;color:#000}
  .chart .chart-legal{margin:7pt 0 0;padding:6pt 0 6.5pt;border:solid #000;border-width:1.5pt 0;font-size:11pt;line-height:1.3;font-weight:400;color:#000;text-wrap:initial}
  .chart-legal b{font-weight:700}
  .dep-key{display:flex;gap:1.4em;margin:8pt 0 0;padding:0 0 3pt .98in;border-bottom:1.5pt solid #000}
  .dep-key p{margin:0;font:700 7.4pt/1.28 var(--sans);letter-spacing:.11em;text-transform:uppercase;color:#000}
  .dep-key p+p{font-weight:400}
  .dep{list-style:none;margin:0;padding:0;border:0}
  .dep-row{display:grid;grid-template-columns:.98in minmax(0,1fr);column-gap:0;align-items:start;padding:4.5pt 0 3.5pt;border-bottom:.6pt solid #000;break-inside:avoid;page-break-inside:avoid;background:none;box-shadow:none}
  .dep-n{display:block;font:800 41pt/.86 var(--drawn);letter-spacing:-.022em;color:#000;margin:-.5pt 0 0}
  .dep-n span{display:block}
  .dep-n .or{margin:1.5pt 0 2pt;font:italic 400 9.5pt/1 var(--serif);letter-spacing:0}
  .dep-line{margin:0;font-size:10.8pt;line-height:1.28;color:#000}
  .dep-line b{font-weight:700}
  .dep-cite{margin:1.5pt 0 0;font-size:9pt;line-height:1.22;color:#000}
  .chart .nw{white-space:nowrap}
  .chart a{color:#000;text-decoration:none}
  .chart-tail{margin:7pt 0 0}
  .chart-check{margin:0;font-size:10pt;line-height:1.3;color:#000}
  .chart-check b{font-weight:700}
  .chart-foot{margin:3pt 0 0;font-size:10pt;line-height:1.3;color:#000}
  .chart-invite{display:block !important;margin:0 0 4pt;font-size:11.5pt;line-height:1.3;font-weight:700;color:#000}
}


/* ==== Step 12 additions, 2026-11-06. Everything above this line is the step 9 file; only the font paths became root-relative. ==== */

/* A quiet state's H1 has no big date, so it sits at the top of the hero instead of on its floor. */
@media (min-width:1040px){.hero--quiet{align-items:start}}
/* A page with nothing beside its check section prints it the full width. */
@media print{.two>section:only-child{grid-column:1/-1}}
/* At 320 px "Washington" ran past its door's edge and was cut off. Under 360 only. */
@media (max-width:359.98px){.door-strip{padding-left:7px;padding-right:6px;gap:3px}.door-code{font-size:23px}.door-name{font-size:11.5px}}

/* Step 12: the lower half of a state page, no hole beside the deposit block */
.dep-state .dep{max-width:none}
.two--stack .stack>.checked{margin-top:36px}
@media (min-width:1040px){.two--extra>section{grid-column:1/-1;max-width:760px}}
@media print{
  .two--stack .stack>.checked{margin-top:8pt}
  .two--extra{display:block !important}
}

/* step 12: the footer and the page address stay together on paper, so the address never prints alone on a sheet (tests/test_print.py) */
@media print{
  .foot{break-inside:avoid;page-break-inside:avoid;break-after:avoid;page-break-after:avoid}
  .print-url{break-before:avoid;page-break-before:avoid}
}