/* Fargoish: guide pages (/jr/, /today/, /tonight/, /about/). Written by guides.py; edit pipeline/templates/guides.css. */
.subnav{border-top:1px solid var(--line);background:var(--paper)}
.subnav-in{display:flex;gap:4px 18px;flex-wrap:nowrap;overflow-x:auto;padding-top:10px;padding-bottom:10px;font:600 14px/1.2 var(--sans);-webkit-overflow-scrolling:touch;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav-in a{white-space:nowrap;color:var(--ink-2);padding:4px 0;border-bottom:2px solid transparent}
.subnav-in a:hover{color:var(--night)}
.subnav-in a[aria-current="page"]{color:var(--night);border-bottom-color:var(--rust)}
.subnav-in a.jr-link{color:var(--rust)}
.g-hero{padding:36px 18px 8px}
.g-upd{font-size:13px;color:var(--ink-3);margin-top:14px}
.g-stale{background:#fde9a8;color:#4a3500;border:1px dashed #b98a00;border-radius:12px;padding:10px 14px;margin-top:16px;font-size:14px}
.g-sec{padding:28px 18px 8px}
.g-sec h2.label{margin:0 0 14px}
.g-sec .sec-intro{color:var(--ink-2);max-width:68ch;margin:-4px 0 16px}
.g-empty{font:italic 400 18px/1.4 var(--serif);color:#c9d3df}
.cal-sec .g-empty a{color:var(--gold);text-decoration:underline}
.g-day{font:600 13px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:30px 0 10px}
.g-day:first-of-type{margin-top:6px}
/* Jr. brand */
.jr-mark{display:inline-flex;align-items:baseline;gap:8px;font:600 30px/1 var(--serif);color:var(--night);letter-spacing:-.03em;margin-bottom:12px}
.jr-mark b{font:italic 700 19px/1 var(--serif);color:#fff;background:var(--rust);padding:6px 11px 7px;border-radius:999px;transform:rotate(-6deg);display:inline-block;box-shadow:3px 3px 0 var(--gold)}
body.jr .masthead{background:linear-gradient(180deg,var(--paper),#fff7e6)}
.jr-tag{font:italic 400 16px/1.35 var(--serif);color:var(--ink-2)}
/* place cards */
.places{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.place{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:grid;gap:6px}
.place h3{font:600 20px/1.2 var(--serif);color:var(--night)}
.place h3 a:hover{color:var(--rust)}
.place .p-meta{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:13px;color:var(--ink-2)}
.pill{display:inline-block;font:700 11px/1 var(--sans);letter-spacing:.06em;padding:5px 8px;border-radius:999px;background:var(--snow);color:var(--ink);border:1px solid var(--line-2)}
.pill-free{background:#e3efdc;border-color:#b9d1aa;color:#2c4a22}
.pill-cost{background:#fbe3d8;border-color:#e8b9a5;color:#7a2d12}
.place p{font-size:15px;line-height:1.5;color:var(--ink)}
.place .via{font-size:12px;color:var(--ink-3)}
.place .via a{text-decoration:underline}
.g-guides{display:grid;gap:16px}
.g-guide{display:grid;gap:8px;background:var(--night);color:#e9eef4;border-radius:18px;padding:22px;overflow:hidden;position:relative}
.g-guide h3{font:500 26px/1.1 var(--serif);color:#fff}
.g-guide p{color:#c9d3df}
.g-guide .go{font:700 13px/1 var(--sans);color:var(--gold);letter-spacing:.04em}
.g-guide:hover h3{text-decoration:underline}
.g-guide img{border-radius:12px;max-height:180px;object-fit:cover;width:100%}
.g-guide .credit{font-size:11px;color:#8a99ab}
.faq{display:grid;gap:10px;max-width:820px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px}
.faq summary{font:600 17px/1.3 var(--serif);color:var(--night);cursor:pointer}
.faq details p{margin-top:8px;color:var(--ink-2)}
.prose{max-width:68ch;display:grid;gap:14px;font:400 17px/1.6 var(--serif);color:var(--ink)}
.prose h2{font:600 24px/1.2 var(--serif);color:var(--night);margin-top:14px}
.prose a{text-decoration:underline;color:var(--rust)}
.prose ul{margin:0;padding-left:20px;display:grid;gap:6px}
.todo-note{font:600 12px/1.3 var(--sans);color:#6b4b00;background:#fde9a8;border-radius:8px;padding:2px 6px}
.na-list .place{background:var(--snow);border-style:dashed}
.f-links{margin-top:10px;font-size:13px;display:flex;gap:6px 14px;flex-wrap:wrap}
.f-links a{text-decoration:underline;color:inherit}
@media (min-width:720px){
  .places{grid-template-columns:1fr 1fr}
  .g-guides{grid-template-columns:1fr 1fr}
  .jr-mark{font-size:38px}
}
@media (min-width:1100px){ .places{grid-template-columns:1fr 1fr 1fr} }