/* ==========================================================================
   Festival Apps — v2 Optimisation Pack design system
   Built to WEB-01 / WEB-02 / WEB-06 / WEB-12 / WEB-13
   One stylesheet, no external requests (hero must load fast on mobile).
   ========================================================================== */

:root{
  --navy:        #1b1c29;
  --navy-deep:   #141520;
  --navy-card:   #24263a;
  --navy-card-2: #2c2e45;

  --orange:      #f97316;
  --orange-hi:   #ff8a3d;
  --orange-deep: #e2560c;

  --ink:         #ffffff;
  --ink-soft:    #c3c6d6;
  --ink-mute:    #8b8fa6;

  --line:        rgba(255,255,255,.12);
  --line-soft:   rgba(255,255,255,.07);

  /* Per-app accents — carried through to each app page */
  --genie:   #35c88a;
  --mapp:    #14b8c4;
  --bestie:  #ff2d92;
  --foodie:  #f7a41d;
  --crap:    #2f95ff;

  --serif: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:  -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap: 1180px;
  --r:    18px;
  --r-lg: 26px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--navy);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--orange-hi); text-decoration:none; }
a:hover{ text-decoration:underline; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }

/* Accessibility ---------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:12px 20px;
  border-radius:0 0 12px 0; font-family:var(--sans); font-weight:700;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--orange-hi); outline-offset:3px; border-radius:6px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ==========================================================================
   Header / nav
   ========================================================================== */
.site-head{
  position:sticky; top:0; z-index:100;
  background:rgba(20,21,32,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line-soft);
}

.head-in{
  display:flex; align-items:center; gap:20px;
  min-height:74px; padding:10px 24px;
  max-width:var(--wrap); margin:0 auto;
}

.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--sans); font-weight:800; font-size:19px;
  letter-spacing:-.02em; color:#fff; white-space:nowrap;
}
.brand:hover{ text-decoration:none; }
.brand .mark{
  width:34px; height:34px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,var(--orange),#ff2d92 55%,#7c4dff);
  display:grid; place-items:center; font-size:15px; color:#fff;
}
.brand .grad{
  background:linear-gradient(90deg,#ff2d92,#f97316 30%,#f7d51d 55%,#35c88a 78%,#2f95ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

.nav{ display:flex; align-items:center; gap:4px; margin-left:auto; font-family:var(--sans); }
.nav a{
  color:var(--ink-soft); font-size:14.5px; font-weight:600;
  padding:9px 15px; border-radius:999px; white-space:nowrap;
}
.nav a:hover{ color:#fff; background:rgba(255,255,255,.07); text-decoration:none; }
.nav a[aria-current="page"]{ color:#fff; background:var(--orange); }

.nav-cta{
  font-family:var(--sans); font-size:14.5px; font-weight:700;
  padding:11px 20px; border-radius:999px; white-space:nowrap;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff !important; box-shadow:0 6px 20px rgba(249,115,22,.35);
}
.nav-cta:hover{ text-decoration:none; filter:brightness(1.08); }

.nav-toggle{
  display:none; margin-left:auto; background:transparent;
  border:1px solid var(--line); color:#fff; font-family:var(--sans);
  font-size:14px; font-weight:700; padding:10px 16px; border-radius:10px; cursor:pointer;
}

/* ==========================================================================
   Buttons  (WEB-13: clear descriptive labels, consistent across the site)
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:16px; font-weight:700; line-height:1;
  padding:16px 30px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; text-align:center; transition:transform .15s ease, filter .15s ease;
}
.btn:hover{ text-decoration:none; transform:translateY(-2px); }

.btn-primary{
  background:linear-gradient(135deg,var(--orange-hi),var(--orange-deep));
  color:#fff !important; box-shadow:0 10px 30px rgba(249,115,22,.4);
}
.btn-secondary{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.45); }
.btn-secondary:hover{ border-color:#fff; background:rgba(255,255,255,.07); }
.btn-ghost{
  background:rgba(255,255,255,.06); color:#fff !important;
  border-color:var(--line); font-size:15px; padding:13px 24px;
}
.btn-sm{ font-size:14.5px; padding:12px 22px; }

.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

/* ==========================================================================
   Sections & typography
   ========================================================================== */
section{ padding:88px 0; }
section.tight{ padding:64px 0; }
.alt{ background:var(--navy-deep); }

h1,h2,h3{ margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.12; }

h1{ font-size:clamp(46px,8vw,86px); }
h2{ font-size:clamp(31px,4.4vw,46px); }
h3{ font-size:clamp(22px,2.6vw,27px); }

.eyebrow{
  font-family:var(--sans); font-size:12.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--orange-hi);
  margin:0 0 16px;
}

.lede{ font-size:clamp(18px,2.1vw,21px); color:var(--ink-soft); max-width:62ch; }

.sec-head{ max-width:70ch; margin-bottom:44px; }
.sec-head p{ color:var(--ink-soft); font-size:18.5px; margin:18px 0 0; }
.sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.accent{ color:var(--orange-hi); }

/* Breadcrumbs (WEB-13) --------------------------------------------------- */
.crumbs{
  font-family:var(--sans); font-size:13.5px; color:var(--ink-mute);
  padding:20px 0 0;
}
.crumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; }
.crumbs li::after{ content:"/"; margin-left:8px; color:rgba(255,255,255,.25); }
.crumbs li:last-child::after{ content:""; }
.crumbs a{ color:var(--ink-mute); }
.crumbs a:hover{ color:var(--orange-hi); }
.crumbs [aria-current]{ color:var(--ink-soft); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  padding:70px 0 96px;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(249,115,22,.20), transparent 62%),
    radial-gradient(760px 520px at 8% 92%, rgba(255,45,146,.14), transparent 60%),
    var(--navy);
}
.hero-grid{
  display:grid; grid-template-columns:1.06fr .94fr; gap:56px; align-items:center;
}
.hero h1{ margin-bottom:14px; }
.hero .tagline{
  font-family:var(--sans); font-weight:800; letter-spacing:-.01em;
  font-size:clamp(21px,2.7vw,29px); color:var(--orange-hi); margin:0 0 26px;
}
.hero h2{ font-size:clamp(25px,3.1vw,34px); margin-bottom:18px; }
.hero .btn-row{ margin-top:34px; }

.trust{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;
  font-family:var(--sans); font-size:13px; color:var(--ink-soft);
}
.trust span{
  border:1px solid var(--line); border-radius:999px; padding:8px 15px;
  background:rgba(255,255,255,.04);
}

/* ==========================================================================
   Image slots  (WEB-07)
   Designed placeholders — swap for the specified .webp, keep width/height.
   ========================================================================== */
.shot{
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--line); background:var(--navy-card);
  box-shadow:var(--shadow); margin:0;
}
.shot svg{ display:block; width:100%; height:auto; }

/* ==========================================================================
   App cards  (WEB-02 — five connected apps, one H3 + CTA each)
   ========================================================================== */
.apps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:24px;
}
.app{
  position:relative; display:flex; flex-direction:column;
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:32px 30px 30px; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.app::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px;
  background:var(--accent,var(--orange));
}
.app:hover{ transform:translateY(-4px); border-color:var(--accent,var(--orange)); }

.app-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.app-logo{
  width:56px; height:56px; border-radius:15px; flex:none;
  display:grid; place-items:center;
  font-family:var(--sans); font-weight:800; font-size:19px; color:#fff;
  background:var(--accent,var(--orange));
  box-shadow:0 8px 22px rgba(0,0,0,.35);
}
.app h3{ font-size:24px; }
.app .role{
  font-family:var(--sans); font-size:12px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent,var(--orange));
  margin:6px 0 0;
}
.app p{ color:var(--ink-soft); font-size:16.5px; margin:0 0 20px; }
.app ul{
  list-style:none; margin:0 0 24px; padding:0;
  font-size:15.5px; color:var(--ink-soft); font-family:var(--sans);
}
.app ul li{ padding:7px 0 7px 24px; position:relative; }
.app ul li::before{
  content:""; position:absolute; left:0; top:15px;
  width:9px; height:9px; border-radius:50%; background:var(--accent,var(--orange));
}
.app .app-cta{ margin-top:auto; }
.app .app-cta .btn{
  width:100%; background:var(--accent,var(--orange)); color:#fff !important;
  box-shadow:none;
}
.app .app-cta .btn:hover{ filter:brightness(1.1); }

/* Reserve room so the badge never sits on top of the app name */
.app.has-badge .app-top{ padding-right:112px; }

.pill-soon{
  position:absolute; top:20px; right:20px;
  font-family:var(--sans); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  background:rgba(255,255,255,.12); border:1px solid var(--line);
  color:var(--ink-soft); padding:6px 12px; border-radius:999px;
}

/* ==========================================================================
   Split rows (image + points)
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split.rev .split-media{ order:2; }

.points{ list-style:none; margin:32px 0 0; padding:0; }
.points li{ display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line-soft); }
.points li:first-child{ border-top:0; padding-top:0; }
.points .dot{
  width:34px; height:34px; border-radius:50%; flex:none; margin-top:3px;
  background:var(--accent,var(--orange)); display:grid; place-items:center;
  font-size:15px; color:#fff;
}
.points b{
  display:block; font-family:var(--sans); font-size:17px;
  font-weight:800; margin-bottom:5px; color:#fff;
}
.points span{ color:var(--ink-soft); font-size:16px; }

/* ==========================================================================
   Event-type grid  (Built for Outdoor Events Everywhere)
   ========================================================================== */
.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.tile{
  background:var(--navy-card); border:1px solid var(--line); border-radius:var(--r);
  padding:24px 22px; transition:border-color .18s ease, transform .18s ease;
}
.tile:hover{ border-color:var(--orange); transform:translateY(-3px); }
.tile .ico{ font-size:26px; margin-bottom:12px; }
.tile b{ display:block; font-family:var(--sans); font-size:16.5px; margin-bottom:6px; }
.tile span{ color:var(--ink-mute); font-size:14.5px; font-family:var(--sans); }

/* Audience cards --------------------------------------------------------- */
.aud{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px; }
.aud .card{
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 26px;
  border-top:3px solid var(--accent,var(--orange));
}
.aud .card b{
  display:block; font-family:var(--sans); font-size:18px; font-weight:800; margin-bottom:10px;
}
.aud .card p{ color:var(--ink-soft); font-size:16px; margin:0 0 16px; }
.aud .card a{ font-family:var(--sans); font-size:14.5px; font-weight:700; }

/* ==========================================================================
   News feed  (WEB-11 — headline, image, date, short excerpt only)
   ========================================================================== */
.feed{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:26px; }
.story{
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease;
}
.story:hover{ transform:translateY(-4px); border-color:var(--orange); }
.story .thumb{ aspect-ratio:16/9; background:var(--navy-card-2); }
.story .thumb svg{ width:100%; height:100%; display:block; }
.story .body{ padding:24px 26px 28px; display:flex; flex-direction:column; flex:1; }
.story .kicker{
  font-family:var(--sans); font-size:11.5px; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--orange-hi); margin:0 0 10px;
}
.story h3{ font-size:21px; margin-bottom:10px; }
/* Card titles on the landing page are links inside a paragraph, not headings —
   see .foot-h. On news.html and story pages they become real headings. */
.story .story-title{
  font-size:21px; font-weight:700; letter-spacing:-.02em;
  line-height:1.2; margin:0 0 10px;
}
.story .story-title a:hover{ color:var(--orange-hi) !important; }
.story time{ font-family:var(--sans); font-size:13px; color:var(--ink-mute); display:block; margin-bottom:12px; }
.story p{ color:var(--ink-soft); font-size:15.5px; margin:0 0 20px; }
.story .more{ margin-top:auto; font-family:var(--sans); font-size:14.5px; font-weight:700; }

.feed-note{
  margin-top:26px; font-family:var(--sans); font-size:13.5px;
  color:var(--ink-mute); border-left:3px solid var(--orange);
  padding:8px 0 8px 16px;
}

/* ==========================================================================
   Closing CTA
   ========================================================================== */
.cta-block{
  background:linear-gradient(135deg,rgba(249,115,22,.16),rgba(255,45,146,.10)),var(--navy-card);
  border:1px solid rgba(249,115,22,.35);
  border-radius:var(--r-lg); padding:64px 48px; text-align:center;
}
.cta-block h2{ margin-bottom:18px; }
.cta-block p{ color:var(--ink-soft); font-size:19px; max-width:62ch; margin:0 auto 32px; }
.cta-block .btn-row{ justify-content:center; }
.cta-mid{
  margin-top:52px; padding:34px 40px; text-align:center;
  background:var(--navy-card); border:1px solid var(--line); border-radius:var(--r-lg);
}
.cta-mid p{ font-family:var(--sans); font-size:18px; font-weight:700; margin:0 0 20px; }
.cta-mid .btn-row{ justify-content:center; }

/* Quotes ----------------------------------------------------------------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px; }
.quote{
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r); padding:28px 26px;
}
.quote .stars{ color:#f7c948; letter-spacing:3px; font-size:15px; margin-bottom:14px; }
.quote blockquote{ margin:0 0 16px; font-size:16.5px; color:var(--ink-soft); }
.quote cite{
  font-family:var(--sans); font-size:14px; font-weight:700;
  color:#fff; font-style:normal;
}

/* ==========================================================================
   Forms  (Claim Your Event / Contact)
   ========================================================================== */
.form-card{
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow);
}
.field{ margin-bottom:22px; }
.field label{
  display:block; font-family:var(--sans); font-size:14px; font-weight:700;
  margin-bottom:8px; color:#fff;
}
.field .hint{ display:block; font-weight:400; color:var(--ink-mute); font-size:13px; margin-top:3px; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:15.5px;
  padding:14px 16px; border-radius:12px;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.05); color:#fff;
}
.field input::placeholder,.field textarea::placeholder{ color:var(--ink-mute); }
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--orange); background:rgba(255,255,255,.08);
}
.field textarea{ min-height:130px; resize:vertical; }
.field select option{ background:var(--navy-card); color:#fff; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.check{ display:flex; gap:12px; align-items:flex-start; font-family:var(--sans); font-size:14.5px; color:var(--ink-soft); }
.check input{ width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--orange); }

/* Steps ------------------------------------------------------------------ */
.steps{ counter-reset:s; display:grid; gap:22px; }
.step{
  position:relative; background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 32px 30px 96px;
}
.step::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:30px; top:28px;
  width:46px; height:46px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange-hi),var(--orange-deep));
  display:grid; place-items:center; color:#fff;
  font-family:var(--sans); font-weight:800; font-size:19px;
}
.step b{ display:block; font-family:var(--sans); font-size:19px; margin-bottom:8px; }
.step p{ color:var(--ink-soft); margin:0; font-size:16.5px; }

/* Prose ------------------------------------------------------------------ */
.prose{ max-width:72ch; }
.prose p{ color:var(--ink-soft); font-size:17.5px; }
.prose h2{ margin-top:52px; margin-bottom:16px; }
.prose ul{ color:var(--ink-soft); padding-left:22px; }
.prose ul li{ margin:9px 0; }

/* Notice ----------------------------------------------------------------- */
.notice{
  font-family:var(--sans); font-size:14.5px; color:var(--ink-soft);
  background:rgba(249,115,22,.10); border:1px solid rgba(249,115,22,.32);
  border-radius:14px; padding:18px 22px; margin-top:28px;
}
.notice b{ color:#fff; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot{ background:var(--navy-deep); border-top:1px solid var(--line-soft); padding:64px 0 32px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; }
.foot-brand .grad{ font-family:var(--sans); font-weight:800; font-size:26px; letter-spacing:-.02em; }
.foot-brand p{ color:var(--ink-mute); font-size:15px; margin:12px 0 0; max-width:34ch; }
/* Footer column labels are NOT headings — the pack fixes the landing page at
   one H1, eight H2s and five H3s, so these are styled paragraphs. */
.foot-h{
  font-family:var(--sans); font-size:15px; font-weight:800;
  letter-spacing:.04em; margin:0 0 16px; color:#fff;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot ul li{ margin:9px 0; }
.site-foot ul a{ color:var(--ink-soft); font-family:var(--sans); font-size:15px; }
.site-foot ul a:hover{ color:var(--orange-hi); }
.foot-contact{ color:var(--ink-soft); font-family:var(--sans); font-size:15px; }
.foot-contact p{ margin:9px 0; }
.foot-bar{
  margin-top:44px; padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between;
  font-family:var(--sans); font-size:13.5px; color:var(--ink-mute);
}
.foot-bar a{ color:var(--ink-mute); }

/* ==========================================================================
   Responsive  (WEB-13: app cards readable and usable on small screens)
   ========================================================================== */
@media (max-width:1040px){
  .nav a{ padding:9px 11px; font-size:14px; }
  .foot-grid{ grid-template-columns:1fr 1fr; gap:34px; }
}

@media (max-width:900px){
  .hero-grid,.split{ grid-template-columns:1fr; gap:44px; }
  .split.rev .split-media{ order:0; }
  .hero{ padding:48px 0 72px; }

  .nav-toggle{ display:block; }
  .nav{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--navy-deep); border-bottom:1px solid var(--line);
    padding:14px 20px 22px; margin:0;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 16px; border-radius:12px; font-size:16px; }
  .nav .nav-cta{ margin-top:10px; text-align:center; justify-content:center; }
  .head-in{ position:relative; flex-wrap:wrap; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  section{ padding:62px 0; }
  .wrap{ padding:0 18px; }
  .cta-block{ padding:44px 24px; }
  .form-card{ padding:28px 22px; }
  .two-col{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; }
  .btn{ width:100%; }
  .btn-row{ flex-direction:column; align-items:stretch; }
  .step{ padding:78px 24px 26px; }
  .step::before{ left:24px; top:24px; }
  .trust span{ font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; }
}

/* ==========================================================================
   Dynamic-site components
   Added for the Express build: real store badges, screenshot galleries, share
   buttons, event cards and form states. Uses the tokens defined above.
   ========================================================================== */

/* Store badges (WEB-02 — real download links, inline SVG, no third-party) --- */
.store-badges{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.store-badge{
  display:inline-flex; align-items:center; gap:12px;
  padding:11px 22px 11px 18px; border-radius:12px;
  background:#000; border:1px solid rgba(255,255,255,.28);
  color:#fff !important; font-family:var(--sans); line-height:1.15;
  transition:border-color .18s ease, transform .18s ease;
}
.store-badge:hover{ text-decoration:none; border-color:#fff; transform:translateY(-2px); }
.store-badge span{ display:flex; flex-direction:column; }
.store-badge small{ font-size:11px; opacity:.82; letter-spacing:.02em; }
.store-badge strong{ font-size:17px; font-weight:700; letter-spacing:-.01em; }

/* Screenshot gallery (WEB-07) ---------------------------------------------- */
.shots-scroll{ margin:40px 0 0; overflow-x:auto; overflow-y:hidden; padding-bottom:14px; }
.shots{
  display:flex; gap:20px; list-style:none; margin:0; padding:0 2px 4px;
  min-width:min-content;
}
.shots li{ flex:0 0 auto; width:300px; }
.shots img{
  width:100%; height:auto; border-radius:var(--r);
  border:1px solid var(--line); background:var(--navy-card);
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.shots-hint{
  font-family:var(--sans); font-size:13px; color:var(--ink-mute); margin:12px 0 0;
}
.shots-scroll::-webkit-scrollbar{ height:8px; }
.shots-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }

/* Share buttons ------------------------------------------------------------ */
.share{ margin:44px 0 0; padding-top:26px; border-top:1px solid var(--line); }
.share-label{
  font-family:var(--sans); font-size:12.5px; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 14px;
}
.share-list{ display:flex; flex-wrap:wrap; gap:10px; list-style:none; margin:0; padding:0; }
.share-btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--sans); font-size:14px; font-weight:600;
  padding:10px 16px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
  color:var(--ink-soft) !important;
}
.share-btn:hover{ text-decoration:none; color:#fff !important; border-color:var(--orange); background:rgba(249,115,22,.14); }

/* Post cards --------------------------------------------------------------- */
.story .thumb{ display:block; }
.story .thumb img{ width:100%; height:100%; object-fit:cover; }
.thumb-fallback{
  display:block; width:100%; height:100%;
  background:linear-gradient(135deg,#2f3350,#1f2133);
}
.thumb-fallback.thumb-line-up,
.thumb-fallback.thumb-announcement{ background:linear-gradient(135deg,#4a2a63,#f97316); }
.thumb-fallback.thumb-travel{ background:linear-gradient(135deg,#243a4d,#2f95ff); }
.thumb-fallback.thumb-weather,
.thumb-fallback.thumb-safety{ background:linear-gradient(135deg,#3d2a1f,#f7a41d); }
.thumb-fallback.thumb-tickets{ background:linear-gradient(135deg,#1f3a2e,#35c88a); }
.thumb-fallback.thumb-community{ background:linear-gradient(135deg,#3a2340,#ff2d92); }
.thumb-fallback.thumb-cancellation{ background:linear-gradient(135deg,#402a2a,#e04a4a); }
.thumb-fallback.thumb-job,
.thumb-fallback.thumb-volunteer{ background:linear-gradient(135deg,#1f3a2e,#14b8c4); }
.job-meta{
  font-family:var(--sans); font-size:13.5px; color:var(--orange-hi);
  margin:0 0 12px !important; font-weight:600;
}

/* Event cards -------------------------------------------------------------- */
.events-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.event-card{
  background:var(--navy-card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px 26px 24px;
  display:flex; flex-direction:column; transition:transform .18s ease, border-color .18s ease;
}
.event-card:hover{ transform:translateY(-4px); border-color:var(--orange); }
.event-top{ display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.event-status{
  font-family:var(--sans); font-size:11px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
}
.event-status.live{ background:#35c88a; color:#06301f; }
.event-status.upcoming{ background:rgba(249,115,22,.18); color:var(--orange-hi); border:1px solid rgba(249,115,22,.4); }
.event-status.past{ background:rgba(255,255,255,.08); color:var(--ink-mute); border:1px solid var(--line); }
.event-claimed{
  font-family:var(--sans); font-size:11px; font-weight:700;
  color:var(--ink-mute); border:1px solid var(--line);
  padding:5px 10px; border-radius:999px;
}
.event-name{ font-size:21px; margin:0 0 10px; letter-spacing:-.02em; line-height:1.2; }
.event-name a{ color:#fff; }
.event-name a:hover{ color:var(--orange-hi); text-decoration:none; }
.event-when{ font-family:var(--sans); font-size:14.5px; color:var(--orange-hi); font-weight:600; margin:0 0 6px; }
.event-where{ font-family:var(--sans); font-size:14px; color:var(--ink-mute); margin:0 0 14px; }
.event-desc{ color:var(--ink-soft); font-size:15.5px; margin:0 0 18px; }
.event-more{ margin:auto 0 0; font-family:var(--sans); font-size:14.5px; font-weight:700; }

/* Tabs (Live / Upcoming / Past — the FestieBestie home-screen pattern) ------ */
.tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.tabs a{
  font-family:var(--sans); font-size:15px; font-weight:700;
  padding:11px 22px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--ink-soft) !important;
}
.tabs a:hover{ text-decoration:none; color:#fff !important; border-color:var(--orange); }
.tabs a[aria-current="page"]{ background:var(--orange); border-color:var(--orange); color:#fff !important; }

/* Filter chips (news categories) ------------------------------------------- */
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.chips a{
  font-family:var(--sans); font-size:13.5px; font-weight:600;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); color:var(--ink-mute) !important; background:transparent;
}
.chips a:hover{ text-decoration:none; color:#fff !important; border-color:var(--orange); }
.chips a[aria-current="page"]{ background:rgba(249,115,22,.16); border-color:var(--orange); color:#fff !important; }

/* Article body ------------------------------------------------------------- */
.article-body{ max-width:72ch; }
.article-body p{ color:var(--ink-soft); font-size:17.5px; margin:0 0 22px; }
.article-body h2{ font-size:clamp(25px,3vw,32px); margin:44px 0 16px; }
.article-body h3{ font-size:clamp(20px,2.3vw,24px); margin:34px 0 12px; }
.article-body ul,.article-body ol{ color:var(--ink-soft); padding-left:24px; margin:0 0 22px; }
.article-body li{ margin:9px 0; }
.article-body img{ border-radius:var(--r); margin:12px 0 26px; }
.article-body blockquote{
  margin:26px 0; padding:4px 0 4px 22px;
  border-left:3px solid var(--orange); color:var(--ink-soft); font-style:italic;
}
.article-body a{ text-decoration:underline; text-underline-offset:3px; }
.article-body code{
  background:rgba(255,255,255,.08); padding:2px 6px; border-radius:5px; font-size:.92em;
}
.article-meta{
  font-family:var(--sans); font-size:14.5px; color:var(--ink-mute); margin:20px 0 0;
}
.article-meta a{ color:var(--ink-soft); }

/* Source attribution (GJ-04 — summarise and link back, never republish) ----- */
.source-note{
  font-family:var(--sans); font-size:14.5px; color:var(--ink-soft);
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:14px; padding:16px 20px; margin:30px 0 0;
}

/* Empty states ------------------------------------------------------------- */
.empty{
  text-align:center; padding:56px 28px;
  border:1px dashed var(--line); border-radius:var(--r-lg);
  color:var(--ink-mute); font-family:var(--sans);
}
.empty b{ display:block; color:#fff; font-size:19px; margin-bottom:8px; font-weight:800; }

/* Flash / success banners -------------------------------------------------- */
.flash{
  border-radius:14px; padding:18px 22px; margin-bottom:28px;
  font-family:var(--sans); font-size:15px;
}
.flash-ok{ background:rgba(53,200,138,.14); border:1px solid rgba(53,200,138,.45); color:#a9ecce; }
.flash-err{ background:rgba(224,74,74,.14); border:1px solid rgba(224,74,74,.45); color:#ffb4b4; }
.flash b{ color:#fff; }

/* Honeypot — hidden from people, visible to naive bots --------------------- */
.hp{
  position:absolute !important; left:-9999px !important;
  width:1px; height:1px; overflow:hidden;
}

/* Pagination --------------------------------------------------------------- */
.pager{ display:flex; gap:12px; justify-content:center; align-items:center; margin-top:44px; font-family:var(--sans); }
.pager a,.pager span{
  padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:700;
  border:1px solid var(--line); color:var(--ink-soft) !important;
}
.pager a:hover{ text-decoration:none; color:#fff !important; border-color:var(--orange); }
.pager .current{ color:var(--ink-mute) !important; border-color:transparent; }

@media (max-width:680px){
  .shots li{ width:74vw; }
  .store-badges{ gap:10px; }
  .store-badge{ flex:1 1 auto; justify-content:center; }
  .share-btn span{ display:none; }
  .share-btn{ padding:12px 14px; }
  .share-btn.copy-link span{ display:inline; }
  .events-grid{ grid-template-columns:1fr; }
}