/* ============================================================================
   FranklinWhat — static "rest pages" (listing, event detail, field guides)
   Calmer, more editorial than the homepage SPA.
   ============================================================================ */

/* ---- Breadcrumb ---- */
.crumbs { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--color-text-3); padding-top: var(--s-5); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.crumbs a { color: var(--color-text-3); }
.crumbs a:hover { color: var(--color-primary); }
.crumbs span { color: var(--color-text-2); }
.crumbs span[aria-hidden="true"] { color: var(--color-text-3); padding-inline: 0.2rem; }

/* ---- Rest-page header ---- */
.page-head { padding-block: var(--s-4) var(--s-5); }
.page-head__kicker { font-family: var(--font-mono); font-size: var(--t-sm); letter-spacing: 0.04em; color: var(--color-primary-text); margin-bottom: var(--s-3); }
.page-head__h { font-size: var(--t-4xl); line-height: 1.0; }
.page-head__h em { font-style: italic; color: var(--color-primary); }
.page-head__sub { margin-top: var(--s-4); font-size: var(--t-md); color: var(--color-text-2); max-width: 56ch; }

/* ---- The gist box (editorial summary) ---- */
.gist { display: flex; flex-wrap: wrap; gap: var(--s-4); padding: var(--s-4) var(--s-5); margin-top: var(--s-5);
  background: var(--surface-2); border: 1.5px solid var(--color-border); border-radius: var(--r-lg); }
.gist__item { display: flex; flex-direction: column; gap: 2px; }
.gist__n { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; color: var(--color-primary); line-height: 1; }
.gist__l { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-3); }
.gist__divider { width: 1.5px; background: var(--color-border); align-self: stretch; }

/* ---- Drive-time legend ---- */
.legend { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-4); font-family: var(--font-mono); font-size: var(--t-xs); color: var(--color-text-3); }
.legend__item { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.6rem; background: var(--surface-2); border: 1px solid var(--color-border); border-radius: var(--r-pill); }

/* ============================================================================
   Event detail
   ============================================================================ */
.detail { display: grid; grid-template-columns: 1fr 320px; gap: var(--s-7); align-items: start; padding-top: var(--s-4); }
@media (max-width: 860px){ .detail { grid-template-columns: 1fr; gap: var(--s-5); } }

.detail__hero { position: relative; aspect-ratio: 16/9; border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-5); border: 1.5px solid var(--color-border); }
.detail__cat { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-3); }
.detail__title { font-size: var(--t-3xl); line-height: 1.04; margin: var(--s-3) 0 var(--s-4); }
.detail__lead { font-size: var(--t-md); color: var(--color-text-2); line-height: 1.7; max-width: 60ch; }
.detail__markers { margin: var(--s-4) 0; }

/* ended banner */
.ended { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--clay-50); color: var(--clay-700); font-size: var(--t-sm); font-weight: 500; margin-bottom: var(--s-4); }
html[data-theme="dark"] .ended { background: color-mix(in srgb, var(--clay-500) 16%, var(--surface)); color: var(--clay-500); }

/* local-tip callout */
.tipnote { display: flex; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); margin: var(--s-4) 0;
  background: linear-gradient(0deg, var(--clay-50), var(--surface)); border: 1.5px solid color-mix(in srgb, var(--clay-500) 35%, var(--line)); }
html[data-theme="dark"] .tipnote { background: color-mix(in srgb, var(--clay-500) 10%, var(--surface)); }
.tipnote svg { width: 18px; height: 18px; color: var(--clay-600); flex-shrink: 0; margin-top: 2px; }
.tipnote b { color: var(--clay-700); } html[data-theme="dark"] .tipnote b { color: var(--clay-500); }

/* ---- Sticky info card (the decision panel) ---- */
.infocard { position: sticky; top: 90px; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--sh-sm); display: grid; gap: var(--s-4); }
@media (max-width: 860px){ .infocard { position: static; } }
.info-row { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); align-items: start; }
.info-row svg { width: 18px; height: 18px; color: var(--color-primary); margin-top: 2px; }
.info-row__l { display: block; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-3); margin-bottom: 2px; }
.info-row__v { font-weight: 600; color: var(--color-text); }
.info-row__v small { display: block; font-weight: 400; color: var(--color-text-2); font-size: var(--t-sm); }
.infocard__actions { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
/* "Found on" attribution row at the foot of the event aside. Always
 * present — users (and Seth, when QA-ing) can click through to verify
 * where the listing came from. */
.detail__source {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px dashed var(--color-border);
  font-size: var(--t-xs);
  text-align: center;
  color: var(--color-text-3);
}
.detail__source a {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- Related / more ---- */
.related { padding-top: var(--s-6); margin-top: var(--s-6); border-top: 1.5px solid var(--color-border); }
.related__list { display: grid; gap: var(--s-3); }

/* ============================================================================
   Field guide (category landing)
   ============================================================================ */
.guide-intro { font-size: var(--t-md); line-height: 1.8; color: var(--color-text-2); max-width: 62ch; }
.guide-intro strong { color: var(--color-text); font-weight: 600; }

/* the spots — canonical places, field-guide style */
.spots { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.spot { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5);
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--r-lg); }
.spot__num { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 600; color: var(--color-text-3); line-height: 1; }
.spot__name { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; }
.spot__desc { font-size: var(--t-sm); color: var(--color-text-2); margin-top: 2px; }
.spot__drive { text-align: right; }
@media (max-width: 620px){ .spot { grid-template-columns: auto 1fr; } .spot__drive { grid-column: 1 / -1; text-align: left; } }

/* FAQ */
.faq { margin-top: var(--s-6); }
.faq details { border-bottom: 1.5px solid var(--color-border); padding: var(--s-4) 0; }
.faq summary { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--s-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-primary); font-size: var(--t-xl); line-height: 1; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--s-3); color: var(--color-text-2); line-height: 1.7; max-width: 64ch; }

/* pull quote / editorial aside */
.aside-quote { font-family: var(--font-display); font-style: italic; font-size: var(--t-xl); line-height: 1.4; color: var(--color-text);
  border-left: 3px solid var(--color-primary); padding-left: var(--s-4); margin: var(--s-6) 0; max-width: 40ch; }

/* ============================================================================
   404 / offline
   ============================================================================ */
.notfound { text-align: center; padding-block: var(--s-9) var(--s-7); }
.notfound__big { font-family: var(--font-display); font-size: clamp(4rem, 14vw, 9rem); font-weight: 600; line-height: 0.9; color: var(--color-primary); letter-spacing: -0.03em; }
.notfound__h { font-family: var(--font-display); font-size: var(--t-2xl); margin-top: var(--s-3); }
.notfound__text { color: var(--color-text-2); max-width: 44ch; margin: var(--s-3) auto var(--s-5); }
.notfound__links { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }

/* ============================================================================
 * A11y polish (added 2026-06):
 *   - Inline links in body copy get a dotted underline so colour isn't the
 *     only cue (Lighthouse: link-in-text-block)
 *   - Crumb separator and spot__num get aria-hidden in HTML (handled by
 *     not being text-only).  CSS just keeps them muted but not invisible.
 * ========================================================================== */
.guide-intro a,
.event-page__description a,
.about__lead a,
.faq p a {
  color: var(--color-primary-text);
  border-bottom: 1.5px dotted color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.guide-intro a:hover,
.event-page__description a:hover,
.about__lead a:hover,
.faq p a:hover {
  border-bottom-style: solid;
  color: var(--color-primary-hover);
}