/* Here: in-the-moment guides. Phone first. Uses the v2.css tokens. See docs/HERE.md. */
.here{max-width:760px;margin:0 auto;padding:22px 16px 56px}
.here .eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin:0 0 10px}
.here h1{font-size:clamp(40px,11vw,76px);line-height:.98;margin:0 0 14px}
.here h2{font-size:clamp(26px,6.4vw,40px);margin:0 0 12px}
.here .lead{font-size:clamp(18px,4.6vw,22px);line-height:1.45;margin:0 0 16px;max-width:36ch}
.here section{padding:26px 0;border-top:1px solid var(--line)}
.here section:first-of-type{border-top:0;padding-top:4px}
.here .micro{font-size:13px;color:var(--muted)}
.here-art{margin:18px 0 6px}
.here-art img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.here-art figcaption{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:6px}

/* The light right now: the one live line on a spot page. */
.here-now{background:var(--navy);color:var(--cream);padding:18px 16px;border-left:6px solid var(--acid);margin:18px 0 6px}
.here-now p{margin:0}
.here-now .here-now-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--acid);margin-bottom:6px}
.here-now [data-here-sun-line]{font-family:var(--head);font-size:clamp(20px,5.4vw,26px);line-height:1.25;letter-spacing:-.02em}
.here-now .micro{color:#c9d2e3;margin-top:10px}
.here-now a{color:var(--acid)}

/* Ways in, by time: big rows a thumb can hit. */
.here-ways{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.here-ways li{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline;padding:14px 12px;background:var(--paper);border:1px solid var(--line);min-height:52px}
.here-ways span{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.here-ways p{margin:0;line-height:1.4}

/* Notice: attention prompts, not facts. */
.here-notice{list-style:none;margin:0;padding:0;counter-reset:n}
.here-notice li{counter-increment:n;position:relative;padding:10px 0 10px 40px;border-bottom:1px dashed var(--line);font-size:18px;line-height:1.4}
.here-notice li::before{content:counter(n);position:absolute;left:0;top:9px;width:28px;height:28px;border-radius:50%;background:var(--acid);font-weight:700;font-size:14px;display:grid;place-items:center}

/* Good to know: sourced lines. */
.here-know{list-style:none;margin:0;padding:0}
.here-know li{padding:10px 0;border-bottom:1px solid var(--line);line-height:1.45}
.here-know strong{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
sup a{text-decoration:none;font-weight:700;color:var(--blue);padding:0 2px}

.here-wrong{background:#fff3ef;border:1px solid var(--red);padding:16px}
.here-wrong ul{margin:8px 0 0;padding-left:18px}
.here-wrong li{margin:6px 0}
.here-call{display:inline-block;background:var(--red);color:#fff;font-weight:700;padding:12px 18px;text-decoration:none;margin-top:6px;min-height:48px}

/* Tags: what you can do here, as plain words. */
.here-tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0}
.here-tags li{font-size:13px;padding:5px 10px;border:1px solid var(--navy);background:var(--paper);border-radius:999px}
.here-tags li b{font-weight:700;color:var(--blue)}
.here-tags li.no{border-style:dashed;color:var(--muted)}

/* Spot list on /here/. */
.here-spots{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.here-spots li{border:1px solid var(--line);background:var(--paper)}
.here-spots a.live{display:block;padding:16px;text-decoration:none;border-left:6px solid var(--acid)}
.here-spots a.live strong{font-family:var(--head);font-size:24px;letter-spacing:-.03em;display:block}
.here-spots .later{padding:14px 16px;color:var(--muted)}
.here-spots .later strong{color:var(--navy)}
.here-near{background:var(--paper);border:1px solid var(--line);padding:16px;margin:14px 0}
.here-near button{background:var(--blue);color:#fff;border:0;padding:13px 18px;font-weight:700;min-height:48px}
.here-near p{margin:10px 0 0}

.here-sources ol{padding-left:22px;font-size:14px;line-height:1.5}
.here-sources li{margin:0 0 10px}
.here-sources .label{display:inline-block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--muted);padding:0 6px;margin-left:4px;color:var(--muted)}
.here table{width:100%;border-collapse:collapse;font-size:15px}
.here th,.here td{text-align:left;vertical-align:top;padding:8px 6px;border-bottom:1px solid var(--line)}
.here .table-wrap{overflow-x:auto}

@media(min-width:900px){.here{padding-top:40px}.here-ways li{grid-template-columns:110px 1fr}}
@media print{.here-now{background:none;color:inherit}.here-near{display:none}}