.wa-guide{
  --paper:#F2EDE3; --surface:#F8F6F1; --surface-2:#E8E5DE;
  --ink:#1A1A1A; --ink-2:#4A4841; --muted:#7A7A7A;
  --rule:#D8D3C8; --rule-soft:#E4E0D6;
  --green:#1D7A3F; --green-line:#4A9456; --green-deep:#162D1A; --brass:#8E7128;
  --display:"Zilla Slab",Georgia,serif;
  --body:"Karla","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}

.wa-guide *{box-sizing:border-box}
.wa-guide{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wa-guide .wrap{max-width:1120px;margin:0 auto;padding:0 26px 88px}
@media(max-width:640px){.wa-guide .wrap{padding:0 18px 56px}}

.wa-guide .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.wa-guide header.mast{padding:54px 0 6px}
.wa-guide h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,6.4vw,62px);line-height:1.02;letter-spacing:-.02em;margin:16px 0 0;text-wrap:balance}
.wa-guide .lede{font-size:clamp(18px,2.1vw,21px);color:var(--ink-2);max-width:54ch;margin:18px 0 0}

.wa-guide .transit{background:var(--green-deep);padding:26px 30px;margin:36px 0 0}
.wa-guide .transit, .wa-guide .transit h2, .wa-guide .transit p, .wa-guide .transit b{color:#F2EDE3 !important}
.wa-guide .transit .kicker{color:#7DC483 !important}
@media(max-width:640px){.wa-guide .transit{padding:22px 20px}}
.wa-guide .transit h2{font-family:var(--display);font-size:clamp(21px,3vw,27px);font-weight:700;margin:9px 0 10px;line-height:1.15}
.wa-guide .transit p{margin:0;max-width:62ch;opacity:.94}

.wa-guide .filters{display:flex;flex-wrap:wrap;gap:7px;margin:44px 0 0}
.wa-guide .fbtn{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  background:transparent;color:var(--muted);border:1px solid var(--rule);padding:8px 13px;cursor:pointer}
.wa-guide .fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.wa-guide .cat{margin-top:44px}
.wa-guide .cathead{display:flex;align-items:baseline;gap:14px;border-bottom:2px solid var(--ink);padding-bottom:9px;margin-bottom:20px}
.wa-guide .cathead h2{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.8vw,27px);margin:0;letter-spacing:-.012em}
.wa-guide .cathead .count{font-family:var(--mono);font-size:11px;color:var(--muted);margin-left:auto}

.wa-guide .mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.wa-guide .tile{background:var(--surface);border:1px solid var(--rule);
  display:flex;flex-direction:column;min-height:118px;overflow:hidden;
  transition:border-color .16s ease,transform .16s ease}
.wa-guide .tile .body{padding:17px 18px 15px;display:flex;flex-direction:column;gap:6px;flex:1}
.wa-guide .tile.has-img .body{padding-top:14px}
.wa-guide .shot{aspect-ratio:4/3;background:var(--surface-2);overflow:hidden;flex:none}
.wa-guide .shot img{width:100%;height:100%;object-fit:cover;display:block}
.wa-guide .tile:hover{border-color:var(--green);transform:translateY(-2px)}
.wa-guide .tile .nm{font-family:var(--display);font-weight:600;font-size:17.5px;line-height:1.2;color:var(--ink)}
.wa-guide .tile .dsc{font-size:14.4px;color:var(--ink-2);line-height:1.45}
.wa-guide .tile .addr{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:auto;padding-top:8px;
  letter-spacing:.03em;display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.wa-guide .tile .st{color:var(--brass)}

.wa-guide .cta{border-left:3px solid var(--green);padding:4px 0 4px 20px;margin-top:58px;max-width:64ch}
.wa-guide .cta h3{font-family:var(--display);font-size:21px;font-weight:700;margin:0 0 8px}
.wa-guide .cta p{margin:0;color:var(--ink-2)}
.wa-guide .note{margin-top:40px;border-top:1px solid var(--rule);padding-top:18px;font-size:14.8px;color:var(--ink-2);max-width:72ch}
.wa-guide .note b{color:var(--ink)}
.wa-guide footer{margin-top:22px;font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.75;max-width:74ch}
.wa-guide :focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.wa-guide .tile{transition:none}}

/* The tiles now ship in the HTML and the script filters them by toggling the
   hidden attribute. A grid item keeps its display value unless something says
   otherwise, and plenty of themes never define a rule for [hidden] at all, so
   this has to be stated rather than assumed. */
.wa-guide [hidden]{display:none !important}
.wa-guide .fbtn .fc{opacity:.62;margin-left:5px;font-variant-numeric:tabular-nums}
.wa-guide .fbtn[aria-pressed="true"] .fc{opacity:.8}
