/* Public "card journey" pages — /event/... and /venue/... — rendered on
   web/templates/_public_page.html. Requires tokens.css + components.css
   loaded first. Light system, same swirl treatment as /login and
   /recommendations (design-system.md) so the background carries through
   from sign-in to an individual show's page. */

body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

.pub-shell{position:relative;min-height:100vh;display:flex;flex-direction:column}

/* Swirl + veil are fixed to the viewport (not any particular ancestor) so
   they never tile or repeat as a long page scrolls, and so the exact same
   markup/rules work whether they're sitting under the signed-out
   .pub-shell or the signed-in .app-main (see _public_page.html) —
   everything below the fold sits on the same flat --page the veil fades
   into either way. */
.site-swirl{position:fixed;inset:0;width:100%;height:100vh;z-index:0;pointer-events:none}
.pub-veil{position:fixed;inset:0;height:100vh;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(252,252,254,0) 38%,var(--page) 76%,var(--page) 100%)}
@media (prefers-reduced-motion:reduce){.site-swirl *{animation:none !important}}
/* Signed-in shell: the sidebar (.app-side) keeps its own opaque --paper
   fill, same as /recommendations, so the swirl only shows through main. */
.app-main{position:relative;z-index:1;background:transparent}

.pub-header,.pub-main,.pub-footer{position:relative;z-index:1}

/* width:100% matters here: .pub-header is a flex item of .pub-shell (a
   column flex container), and a flex item with margin:0 auto but no
   explicit width shrinks to fit its content and gets centred by the auto
   margins instead of stretching — which is why the logo/button were
   drifting to the middle instead of sitting at the true edges. .pub-main
   avoids this the same way, with its own explicit width:100% below. */
.pub-header{width:100%;max-width:760px;margin:0 auto;padding:24px 20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.pub-logo{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:Fraunces,Georgia,serif;font-weight:600;font-size:16px;
  letter-spacing:-.01em;color:var(--ink)}
.pub-logo em{font-style:italic;font-weight:400;color:var(--ultramarine)}
.pub-logo-mark{width:26px;height:26px;border-radius:8px;flex:none;object-fit:cover}
.pub-join-btn{height:36px;padding:0 16px;font-size:13.5px;flex:none}

/* Below 820px (app.css's own breakpoint), the signed-out header becomes
   the exact same fixed top bar the signed-in shell already uses
   (.app-topbar) — same position/height/background/border/padding —
   rather than a second, hand-tuned mobile header to keep in sync. */
@media (max-width:820px){
  .pub-header{position:fixed;top:0;left:0;right:0;width:auto;max-width:none;
    margin:0;height:56px;z-index:46;background:var(--page);
    border-bottom:1px solid var(--line);padding:0 8px 0 16px}
  .pub-logo{font-size:16px}
  .pub-logo-mark{width:22px;height:22px}
  .pub-main{margin-top:56px}
}

.pub-main{flex:1;max-width:760px;margin:0 auto;padding:40px 20px 60px;width:100%}
/* Nested one level deeper inside .app-main (signed-in shell) — no extra
   flex/width rules needed, it centres in whatever column app.css leaves
   to the right of the sidebar the same way it centres in .pub-shell. */

/* A sibling of .pub-main/.app-shell/.rec-shell inside the same flex column
   (.pub-shell or .app-main — both display:flex;flex-direction:column;
   min-height:100vh), never nested inside them. margin-top:auto is what
   pins it to the bottom of a short page instead of hugging short content —
   without this a page like /archive with little content left the footer
   stranded high up, dwarfed by the sidebar's full-height nav. See
   _pub_footer.html and app.css's .app-main for the other half of this. */
.pub-footer{color:var(--ink-3);font-size:12px;text-align:center;
  margin-top:auto;padding:24px 20px 28px;border-top:1px solid var(--line)}

/* ── "Join for free" CTA under a show card (event.html, signed-out only) ── */
.pub-cta{display:block;text-decoration:none;text-align:center;margin:22px 0 0;
  padding:18px 20px;border-radius:var(--r-control);background:var(--paper);
  box-shadow:var(--shadow-card);border:1px solid var(--line);color:var(--ink-2)}
.pub-cta strong{display:block;color:var(--ultramarine);font-weight:600;margin-top:2px}
.pub-cta:hover{border-color:var(--ultramarine)}
.pub-cta:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus-ring)}

/* ── Shared page furniture (event + venue) ───────────────────────────── */
.pub-crumb{font-size:12px;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.06em;margin:0 0 16px}
.pub-crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.pub-crumb a:hover{color:var(--ultramarine);border-color:var(--ultramarine)}

.pub-main h1{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:clamp(26px,5vw,36px);line-height:1.15;letter-spacing:-.01em;
  margin:0 0 8px;color:var(--ink)}
.pub-venue-line{color:var(--ink-2);font-size:15px;margin:0 0 6px}
.pub-venue-line a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-2)}
.pub-venue-line a:hover{color:var(--ultramarine);border-color:var(--ultramarine)}
.pub-dates{font-size:13.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;margin:0 0 22px}

.pub-band{background:var(--wash);border:1px solid var(--line);border-radius:var(--r-control);
  padding:16px 18px;margin:0 0 26px}
.pub-band .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-3);margin:0 0 6px}
.pub-band .viewbare{display:inline-block;margin-top:10px;font-size:12.5px}

.pub-desc{font-size:16px;line-height:1.75;margin:0 0 28px;color:var(--ink)}
.pub-meta-line{font-size:14.5px;color:var(--ink-2);margin:0 0 10px}
.pub-meta-line strong{color:var(--ink);font-weight:500}

.pub-also{margin-top:44px}
.pub-also h2{font-family:Fraunces,Georgia,serif;font-size:19px;font-weight:600;
  color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:10px;margin:0 0 6px}
.pub-also a{display:block;text-decoration:none;color:var(--ink);padding:13px 2px;
  border-bottom:1px solid var(--line)}
.pub-also a:hover{color:var(--ultramarine)}
.pub-also .m{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;
  font-variant-numeric:tabular-nums}

.pub-venue-list a{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-control);box-shadow:var(--shadow-sm);
  padding:14px 16px;margin-bottom:10px;text-decoration:none;color:var(--ink)}
.pub-venue-list a:hover{border-color:var(--ultramarine)}

/* ── Legal copy (privacy.html, terms.html) ───────────────────────────────
   Long-form prose inside .pub-main, styled to the "Card heading" spec
   (design-system.md's typography table) rather than reusing .pub-also's
   h2, which is tuned for a short list heading, not a run of sections. */
.pub-updated{font-size:12.5px;color:var(--ink-3);margin:-4px 0 32px}
.pub-legal h2{font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
  margin:36px 0 10px}
.pub-legal p{margin:0 0 16px;color:var(--ink)}
.pub-legal ul{margin:0 0 16px;padding-left:20px}
.pub-legal li{margin-bottom:10px;color:var(--ink)}
.pub-legal li strong{font-weight:500}
.pub-legal a{color:var(--ultramarine);text-decoration:none}
.pub-legal a:hover{text-decoration:underline}