/* Local SEO pages (/ai-photo-booth/<category>/<city> and /<service>/<city>). Same paper, ink, Inter and flat host
   colors as the homepage, and its visit and fan pieces from styles.css. Built into ai-photo-booth/silo.css with the
   host color classes appended. Every size rides --u, so the page scales up on wide screens instead of floating. */

/* ---------- hero: the city pitch on the left, a strip fan with the lead host speaking on the right ---------- */
.silo-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: calc(64 * var(--u));
  min-height: calc(100svh - 72 * var(--u));
  padding-top: calc(32 * var(--u)); padding-bottom: calc(72 * var(--u));
}
.silo-eyebrow { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: calc(24 * var(--u)); color: var(--muted); font-weight: 600; font-size: max(14px, calc(15 * var(--u))); }
.silo-eyebrow a { color: var(--muted); text-decoration: none; }
.silo-eyebrow a:hover { color: var(--ink); }
.silo-hero h1 { font-size: clamp(42px, 5.8vw, calc(92 * var(--u))); letter-spacing: -0.05em; line-height: .92; max-width: 13ch; text-wrap: balance; }
.silo-hero .lede { max-width: 44ch; font-size: max(17px, calc(20 * var(--u))); }

.silo-stage { position: relative; display: grid; justify-items: center; padding-bottom: calc(40 * var(--u)); }
.silo-fan { padding: calc(16 * var(--u)) 0 0; }
.silo-fan img { width: max(min(calc(200 * var(--u)), 13vw), 92px); box-shadow: 0 calc(18 * var(--u)) calc(40 * var(--u)) rgba(10, 10, 10, .12); }
.silo-fan img:nth-child(1) { margin-right: calc(-36 * var(--u)); }
.silo-fan img:nth-child(3) { margin-left: calc(-36 * var(--u)); }

/* The lead host's card hangs over the fan like a speech bubble: the recorded line, and a button that plays it. */
.silo-say {
  position: absolute; left: 0; bottom: 0; z-index: 3; margin: 0;
  width: min(calc(360 * var(--u)), 82%);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: calc(20 * var(--u)); overflow: hidden;
}
.silo-say figcaption { display: grid; gap: 2px; padding: calc(14 * var(--u)) calc(20 * var(--u)); background: var(--c); color: var(--c-ink); border-bottom: 1.5px solid var(--ink); }
.silo-say figcaption b { font-size: max(18px, calc(21 * var(--u))); letter-spacing: -0.02em; }
.silo-say figcaption span { font-size: max(13px, calc(14 * var(--u))); opacity: .85; }
.silo-say blockquote { margin: 0; padding: calc(18 * var(--u)) calc(20 * var(--u)) 0; }
.silo-say blockquote p { font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; font-size: max(17px, calc(20 * var(--u))); }
.silo-say blockquote p::before { content: "\201C"; }
.silo-say blockquote p::after { content: "\201D"; }
.silo-say-play { display: flex; align-items: center; gap: 12px; padding: calc(14 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); color: var(--muted); font-weight: 600; font-size: max(14px, calc(15 * var(--u))); }

/* ---------- long-form sections: heading pinned on the left, reading column on the right ---------- */
.silo-sec { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(64 * var(--u)); align-items: start; }
.silo-sec h2 { font-size: clamp(30px, 3.6vw, calc(52 * var(--u))); line-height: 1; max-width: 14ch; position: sticky; top: calc(110 * var(--u)); text-wrap: balance; }
.silo-sec-body p { max-width: 62ch; font-size: max(17px, calc(19 * var(--u))); line-height: 1.6; color: var(--ink-2); }
.silo-sec-body p + p { margin-top: calc(20 * var(--u)); }
.silo-sec-body p:first-child { font-size: max(19px, calc(22 * var(--u))); line-height: 1.5; color: var(--ink); }
.silo-sec a, .faq-list a, .silo-venue-list a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* The visit block sits right after the first section, so it needs its own breathing room. */
.silo-visit { margin-bottom: 0; }
.silo-visit + section { padding-top: calc(120 * var(--u)); }

/* ---------- hosts: rows with a play button, colored by host ---------- */
.silo-hosts-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: calc(64 * var(--u)); align-items: end; }
.silo-hosts-head h2 { font-size: clamp(30px, 3.6vw, calc(52 * var(--u))); line-height: 1; max-width: 14ch; }
.silo-hosts-head p { color: var(--muted); max-width: 46ch; font-size: max(16px, calc(18 * var(--u))); }
.silo-picks { list-style: none; margin: calc(40 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(300 * var(--u))), 1fr)); gap: calc(14 * var(--u)); }
.silo-pick {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  padding: calc(18 * var(--u)) calc(20 * var(--u)); border: 1.5px solid var(--ink); border-radius: calc(16 * var(--u));
  background: var(--c, var(--soft)); color: var(--c-ink, var(--ink));
}
.silo-pick .track-play { flex: none; }
.silo-pick a { display: grid; gap: 4px; min-height: 44px; align-content: center; color: inherit; text-decoration: none; }
.silo-pick a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.silo-pick b { font-size: max(19px, calc(22 * var(--u))); letter-spacing: -0.02em; }
.silo-pick span { font-size: max(14px, calc(15 * var(--u))); line-height: 1.35; }

/* ---------- venues: a numbered index with rules, not a wall of cards ---------- */
.silo-venues h2 { font-size: clamp(30px, 3.6vw, calc(52 * var(--u))); line-height: 1; max-width: 20ch; text-wrap: balance; }
.silo-venue-list {
  list-style: none; margin: calc(48 * var(--u)) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(380 * var(--u))), 1fr)); gap: calc(44 * var(--u)) calc(40 * var(--u)); align-items: start;
}
.silo-venue-list li { border-top: 1.5px solid var(--ink); padding-top: calc(18 * var(--u)); }
.silo-num { display: block; font-weight: 800; font-size: max(14px, calc(15 * var(--u))); color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: calc(10 * var(--u)); }
.silo-venue-list h3 { font-size: max(20px, calc(24 * var(--u))); letter-spacing: -0.025em; line-height: 1.15; }
.silo-venue-list p { margin-top: 10px; color: var(--ink-2); font-size: max(16px, calc(17 * var(--u))); line-height: 1.55; }

/* ---------- mid-page ask: one ink band ---------- */
.silo-cta {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: calc(48 * var(--u)) calc(64 * var(--u)); align-items: end;
  background: var(--ink); color: var(--paper); border-radius: calc(28 * var(--u));
  padding: calc(80 * var(--u)) calc(72 * var(--u));
  width: min(var(--max), calc(100% - 2 * var(--pad))); max-width: none; margin: 0 auto;
}
.silo-cta h2 { font-size: clamp(36px, 5vw, calc(76 * var(--u))); max-width: 12ch; text-wrap: balance; }
.silo-cta p { color: #D4D4D0; max-width: 40ch; font-size: max(17px, calc(19 * var(--u))); margin-bottom: calc(28 * var(--u)); }
.silo-cta :focus-visible { outline-color: var(--paper); }
.pill-light { background: var(--paper); color: var(--ink); --fill: #FFC93C; }

/* ---------- the enclosed booth ---------- */
.silo-booth { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: calc(72 * var(--u)); align-items: center; }
.silo-booth img { display: block; width: 100%; max-width: calc(520 * var(--u)); height: auto; justify-self: center; }
.silo-booth h2 { font-size: clamp(30px, 3.6vw, calc(52 * var(--u))); line-height: 1; max-width: 14ch; }
.silo-booth p { margin-top: calc(20 * var(--u)); max-width: 48ch; color: var(--ink-2); font-size: max(17px, calc(19 * var(--u))); }
.silo-booth .textlink { margin-top: calc(16 * var(--u)); }

.silo-areas-sec { padding-top: 0; }
.silo-areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.silo-areas li { padding: 8px 16px; border: 1.5px solid var(--line); border-radius: 999px; font-weight: 600; font-size: max(15px, calc(16 * var(--u))); }

.silo-related {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: calc(40 * var(--u));
  padding: calc(48 * var(--u)) var(--pad) calc(72 * var(--u)); max-width: calc(var(--max) + 2 * var(--pad)); margin: 0 auto;
  border-top: 1px solid var(--line);
}
.silo-related h2 { font-size: max(19px, calc(22 * var(--u))); letter-spacing: -0.02em; }
.silo-related ul { list-style: none; margin: 14px 0 0; padding: 0; }
.silo-related a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1000px) {
  .silo-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 40px; padding-top: 24px; }
  .silo-stage { padding-bottom: 0; }
  .silo-fan { order: 0; }
  .silo-say { position: relative; width: min(420px, 100%); margin-top: -40px; }
  .silo-sec, .silo-hosts-head, .silo-cta, .silo-booth { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .silo-sec h2 { position: static; }
  .silo-cta { padding: 48px 28px; }
  .silo-booth img { max-width: 360px; justify-self: start; }
}
@media (max-width: 640px) {
  .silo-hero h1 { font-size: clamp(38px, 11vw, 52px); }
  .silo-fan img { width: min(30vw, 120px); }
  .silo-fan img:nth-child(1) { margin-right: -20px; }
  .silo-fan img:nth-child(3) { margin-left: -20px; }
  .silo-cta { border-radius: 20px; padding: 40px 20px; width: calc(100% - 24px); }
  .silo-visit + section { padding-top: 80px; }
}

/* Generated from hosts.js by scripts/build-silo.mjs */
.host-charlie { --c: #29A8FF; --c-ink: #0A0A0A; }
.host-party { --c: #FFC93C; --c-ink: #0A0A0A; }
.host-vampire { --c: #6A3DF0; --c-ink: #FFFFFF; }
.host-hype { --c: #C6F135; --c-ink: #0A0A0A; }
.host-roast { --c: #E0247A; --c-ink: #0A0A0A; }
.host-cowboy { --c: #F2542D; --c-ink: #0A0A0A; }
.host-announcer { --c: #B9A8FF; --c-ink: #0A0A0A; }
.host-sixties { --c: #2B50E0; --c-ink: #FFFFFF; }
.host-disco { --c: #7A1F2B; --c-ink: #FFFFFF; }
.host-hippie { --c: #5ED3A4; --c-ink: #0A0A0A; }
.host-eighties { --c: #00C8D7; --c-ink: #0A0A0A; }
.host-nineties { --c: #FF9EC7; --c-ink: #0A0A0A; }
.host-santa { --c: #D9252A; --c-ink: #FFFFFF; }