/* Dear Green Compass — mobile-first, no frameworks */
:root{--ink:#17241e;--muted:#4c6459;--green:#0f3d2e;--green2:#1f6b4f;--mint:#9fd3b5;--wash:#eef6f1;--line:#d6e5dc;--gold:#f2c14e;--cream:#fdf6e3;--rad:12px;--max:68rem}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Arial,sans-serif;color:var(--ink);background:#fff}
img,svg{max-width:100%;height:auto}
a{color:var(--green2);text-underline-offset:.15em}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--green);line-height:1.2;margin:1.6em 0 .5em}
h1{font-size:clamp(1.9rem,6vw,3rem);margin-top:.3em}
h2{font-size:clamp(1.4rem,4vw,1.9rem)}
h3{font-size:1.2rem}
p,ul,ol,table,blockquote{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--green);padding:.6em 1em;z-index:10}
.skip:focus{left:.5rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 1.1rem}
.narrow{max-width:46rem}
/* header */
.site-head{background:var(--green);color:#fff}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding-top:.7rem;padding-bottom:.7rem}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-family:Georgia,serif;font-size:1.2rem;font-weight:bold}
.brand svg{width:40px;height:40px}
.nav{display:flex;flex-wrap:wrap;gap:.2rem .9rem;margin-left:auto;padding:0;list-style:none;font-size:.95rem}
.nav a{color:#e8f2ec;text-decoration:none;padding:.35rem 0;display:inline-block}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold);text-decoration:underline}
/* hero */
.hero{background:linear-gradient(160deg,var(--green) 0%,#174f3b 70%,var(--green2) 100%);color:#e8f2ec;padding:2.5rem 0 3rem;position:relative;overflow:hidden}
.hero h1{color:#fff;max-width:20ch}
.hero p.lede{font-size:1.15rem;max-width:38rem}
.hero .kicker{color:var(--mint);text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;margin:0}
.hero .bgcompass{position:absolute;right:-5rem;bottom:-6rem;width:22rem;opacity:.12;pointer-events:none}
.btn{display:inline-block;background:var(--gold);color:var(--green);font-weight:700;text-decoration:none;padding:.85rem 1.3rem;border-radius:999px;border:0;font-size:1.05rem}
.btn:hover{background:#ffd56b;color:var(--green)}
.btn.ghost{background:transparent;color:#fff;border:2px solid var(--mint)}
.btn.green{background:var(--green);color:#fff}
.fine{font-size:.85rem;color:var(--muted)}
.hero .fine{color:var(--mint)}
.hero .fine a{color:#fff}
/* sections */
section.band{padding:2.5rem 0}
section.wash{background:var(--wash)}
.grid{display:grid;gap:1rem}
@media(min-width:44rem){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:repeat(3,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.1rem 1.2rem}
.card h3{margin-top:0}
.pill{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;border-radius:999px;padding:.15rem .6rem;background:var(--wash);color:var(--green)}
.pill.paid{background:#fdf0d2;color:#6b4a00}
.offer{display:grid;gap:1.2rem;align-items:center;background:var(--green);color:#e8f2ec;border-radius:var(--rad);padding:1.4rem}
.offer h2{color:#fff;margin-top:0}
.offer img{border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);width:100%;max-width:220px}
@media(min-width:44rem){.offer{grid-template-columns:220px 1fr}}
.note{background:var(--cream);border-left:5px solid var(--gold);padding:.9rem 1rem;border-radius:8px}
.warn{background:#fff4f2;border-left:5px solid #c0412b;padding:.9rem 1rem;border-radius:8px}
.checked{font-size:.85rem;color:var(--muted)}
/* tables */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--green);color:#fff;font-weight:600}
tr:nth-child(even) td{background:#f7fbf9}
/* issue */
.issue blockquote{margin-left:0;padding:.8rem 1rem;background:var(--wash);border-left:5px solid var(--green2);border-radius:8px}
.issue blockquote.ad{background:var(--cream);border-left-color:var(--gold)}
.issue h2{border-top:2px solid var(--line);padding-top:1rem}
.issue small{display:block;font-size:.85rem;color:var(--muted);line-height:1.5}
/* venues */
.venue{border:1px solid var(--line);border-radius:var(--rad);padding:1rem 1.2rem;margin:0 0 1rem}
.venue h3{margin:0 0 .3rem;display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:baseline}
.venue dl{display:grid;grid-template-columns:1fr;gap:.15rem .9rem;margin:.6rem 0 0}
.venue dt{font-weight:700;color:var(--green2);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;margin-top:.4rem}
.venue dd{margin:0}
@media(min-width:44rem){.venue dl{grid-template-columns:9.5rem 1fr}.venue dt{margin-top:0}}
.cafe{background:var(--cream);border-radius:8px;padding:.6rem .8rem;margin-top:.7rem}
.stopnav{display:flex;flex-wrap:wrap;gap:.4rem;padding:0;list-style:none}
.stopnav a{display:inline-block;border:1px solid var(--green2);border-radius:999px;padding:.3rem .8rem;text-decoration:none;font-size:.9rem}
.stopnav a:hover{background:var(--green2);color:#fff}
.stophead{display:flex;align-items:center;gap:.6rem;background:var(--green);color:#fff;border-radius:var(--rad);padding:.6rem 1rem;margin:2rem 0 .6rem}
.stophead h2{color:#fff;margin:0;font-size:1.35rem}
.stophead .tag{margin-left:auto;color:var(--mint);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.dot{width:2rem;height:2rem;border-radius:50%;background:var(--gold);color:var(--green);display:grid;place-items:center;font-size:.65rem;font-weight:800;flex:none}
.dot.rail{background:var(--mint)}
/* footer */
.site-foot{background:#0b2e22;color:#cfe3d7;padding:2rem 0;margin-top:3rem;font-size:.92rem}
.site-foot a{color:#fff}
.site-foot .cols{display:grid;gap:1rem}
@media(min-width:44rem){.site-foot .cols{grid-template-columns:2fr 1fr 1fr}}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin:.25rem 0}
@media(prefers-reduced-motion:no-preference){.btn{transition:background .15s}}
@media print{.site-head,.site-foot,.btn{display:none}}
.hero .btn{margin:0 .4rem .6rem 0}
@media(max-width:30rem){.nav{margin-left:0;gap:.1rem .8rem;font-size:.92rem}}