/* Fun Snaps V4 — content/article page layer.
   Loads AFTER styles.css and reuses its tokens. Shared by all city + service pages. */

/* .wrap and .wrap-wide are defined together in styles.css off --page-max / --page-pad
   so every page on the site shares one container width. Do not override here. */

.site-header--solid{ position:static; background:var(--ink); border-bottom:1px solid var(--line); }

.page-head{
  padding:clamp(56px,7vw,88px) 0 clamp(40px,5vw,60px);
  background:var(--ink-panel);
  border-bottom:1px solid var(--line);
}
.page-head-grid{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:end; }
@media (max-width:900px){ .page-head-grid{ grid-template-columns:1fr; align-items:start; } }

.breadcrumbs{
  font-family:var(--f-mono); font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 20px;
}
.breadcrumbs a{ text-decoration:none; border-bottom:1px solid var(--line); }
.breadcrumbs a:hover{ color:var(--accent); border-color:var(--accent); }
.breadcrumbs span{ margin:0 8px; opacity:.5; }

.page-head h1{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(2.4rem,6vw,5rem); line-height:0.9; letter-spacing:0.01em;
  margin:0; max-width:18ch;
}
.page-lede{ font-size:clamp(1.02rem,1.35vw,1.22rem); line-height:1.5; max-width:52ch; margin:0; color:rgba(var(--cream-rgb),0.9); }

/* ---------- Two-column article shell ---------- */
.article{ padding:clamp(44px,5.5vw,76px) 0 0; }
.article-grid{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(32px,4.5vw,72px); align-items:start; }
@media (max-width:1040px){ .article-grid{ grid-template-columns:1fr; } }

.article-body > * + *{ margin-top:1.05em; }
.article-body p, .article-body ul{ max-width:70ch; }
.article-body p{ color:rgba(var(--cream-rgb),0.86); }
.article-body h2{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.8rem,3vw,2.9rem); line-height:0.98; letter-spacing:0.01em;
  margin-top:2em; margin-bottom:0.45em; color:var(--cream);
  padding-top:0.5em; border-top:1px solid var(--line);
}
.article-body h2:first-child{ border-top:0; padding-top:0; margin-top:0; }
.article-body h3{
  font-family:var(--f-body); font-weight:500; font-size:1.08rem;
  margin-top:1.9em; margin-bottom:0.3em; color:var(--accent-bright);
}
.article-body a{ color:var(--accent-bright); text-decoration:none; border-bottom:1px solid rgba(var(--accent-rgb),0.45); }
.article-body a:hover, .article-body a:focus-visible{ border-color:var(--accent-bright); }
.article-body strong{ color:var(--cream); font-weight:500; }
.article-body ul{ padding-left:1.1em; margin-top:0.7em; }
.article-body li{ margin-bottom:0.4em; color:rgba(var(--cream-rgb),0.86); }
.article-body li::marker{ color:var(--accent); }

/* ---------- Venue cards: use the full column width ---------- */
.venue-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:1.6em; }
.venue-card{ border:1px solid var(--line); background:var(--ink-panel); padding:clamp(20px,2vw,26px); }
.venue-card h3{ margin-top:0; margin-bottom:0.15em; color:var(--cream); font-size:1.06rem; }
.venue-card .venue-where{ font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin:0 0 0.9em; }
.venue-card p{ font-size:0.94rem; margin:0; max-width:none; }
.venue-card p + p{ margin-top:0.7em; }

.confirm{
  display:inline; font-family:var(--f-mono); font-size:0.62rem; letter-spacing:0.07em;
  text-transform:uppercase; background:rgba(var(--accent-rgb),0.14); color:var(--accent-bright);
  border:1px dashed rgba(var(--accent-rgb),0.5); padding:1px 6px; border-radius:2px;
}

/* ---------- Sticky rail ---------- */
.rail{ position:sticky; top:28px; display:flex; flex-direction:column; gap:18px; }
@media (max-width:1040px){ .rail{ position:static; } }
.rail-card{ border:1px solid var(--line); background:var(--ink-panel); padding:24px; }
.rail-card h2{ font-family:var(--f-mono); font-size:0.66rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--accent); margin:0 0 14px; border:0; padding:0; }
.rail-facts{ margin:0; font-size:0.9rem; }
.rail-facts dt{ font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.07em; text-transform:uppercase; color:var(--ink-soft); }
.rail-facts dd{ margin:2px 0 12px; color:rgba(var(--cream-rgb),0.9); }
.rail-facts dd:last-child{ margin-bottom:0; }
.rail-card p{ font-size:0.9rem; color:rgba(var(--cream-rgb),0.86); margin:0 0 16px; }
.rail-card .btn{ width:100%; text-align:center; }
.rail-jump{ list-style:none; margin:0; padding:0; font-size:0.9rem; }
.rail-jump li{ margin-bottom:9px; }
.rail-jump a{ color:rgba(var(--cream-rgb),0.86); text-decoration:none; border-bottom:1px solid transparent; }
.rail-jump a:hover{ color:var(--accent-bright); border-color:var(--accent-bright); }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid var(--line); padding-bottom:1.3em; margin-top:1.7em; }
.faq-item h3{ margin-top:0; color:var(--cream); font-size:1.1rem; }

/* ---------- Closing CTA ---------- */
.page-cta{
  margin-top:clamp(56px,7vw,88px); border-top:1px solid var(--line);
  background:var(--ink-panel-2); padding:clamp(40px,5.5vw,68px) 0;
}
.page-cta-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center; }
@media (max-width:860px){ .page-cta-grid{ grid-template-columns:1fr; } }
.page-cta h2{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(1.9rem,3.6vw,3.1rem); line-height:0.95; margin:0 0 12px;
}
.page-cta p{ max-width:54ch; margin:0 0 24px; color:rgba(var(--cream-rgb),0.86); }