/* Phantom guide styles. Extracted from phantomguides.html so the hub and every
   production/city guide page can share one stylesheet. All rules are scoped
   under #fbd. Edit here to restyle every guide page at once. */
/* All styles are scoped under #fbd so they don't fight your WordPress theme. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

#fbd, #fbd * { margin:0; padding:0; box-sizing:border-box; }

#fbd {
  --bg:#0c0a0f;
  --bg2:#15121b;
  --panel:#1b1722;
  --ink:#ece6da;
  --ink-soft:#b9b1a3;
  --gold:#cba14e;
  --gold-soft:#e3cf9b;
  --crimson:#9b2335;
  --silver:#c9ccd1;
  --line:rgba(203,161,78,0.22);
  --serif:'EB Garamond', Georgia, serif;
  --display:'Cormorant Garamond', Georgia, serif;

  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(155,35,53,0.18), transparent 60%),
    radial-gradient(900px 500px at 80% 110%, rgba(203,161,78,0.10), transparent 60%),
    var(--bg);
  line-height:1.7;
  font-size:18px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#fbd a { color:var(--gold-soft); text-decoration:none; border-bottom:1px solid var(--line); transition:color .2s, border-color .2s; }
#fbd a:hover { color:#fff; border-color:var(--gold); }

/* ---------- decorative top rule ---------- */
#fbd .fbd-rule {
  height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:.5; margin:0 auto;
}

/* ---------- HERO ---------- */
#fbd .fbd-hero {
  position:relative;
  text-align:center;
  padding:90px 24px 60px;
  background:
    radial-gradient(700px 360px at 50% 0%, rgba(155,35,53,0.25), transparent 70%),
    linear-gradient(180deg, var(--bg2), var(--bg));
  border-bottom:1px solid var(--line);
}
#fbd .fbd-logo { width:min(380px,74vw); height:auto; display:block; margin:0 auto 22px; filter:drop-shadow(0 4px 20px rgba(0,0,0,0.55)); }
#fbd .fbd-kicker {
  font-family:var(--serif);
  letter-spacing:.42em; text-transform:uppercase;
  font-size:12px; color:var(--gold); margin-bottom:18px;
}
#fbd .fbd-hero h1 {
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(42px, 8vw, 92px);
  line-height:.98;
  letter-spacing:.5px;
}
#fbd .fbd-hero h1 .it { font-style:italic; color:var(--gold-soft); display:block; font-weight:500; }
#fbd .fbd-hero p.sub {
  max-width:640px; margin:22px auto 0; color:var(--ink-soft);
  font-size:19px; font-style:italic;
}
#fbd .fbd-brand { margin-top:26px; font-size:14px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
#fbd .fbd-brand a { border:none; }
#fbd .fbd-sponsor { margin-top:18px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
#fbd .fbd-sponsor a { color:var(--gold-soft); border:none; }
#fbd .fbd-sponsor a:hover { color:#fff; }

/* ---------- TAB SWITCHER ---------- */
#fbd .fbd-tabs {
  position:sticky; top:0; z-index:40;
  display:flex; justify-content:center; gap:0;
  background:rgba(12,10,15,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
#fbd .fbd-tab {
  font-family:var(--display);
  font-size:clamp(18px,3.4vw,26px);
  font-weight:600;
  letter-spacing:.5px;
  color:var(--ink-soft);
  background:none; border:none; cursor:pointer;
  padding:18px 26px; position:relative;
  transition:color .2s;
}
#fbd .fbd-tab:hover { color:var(--ink); }
#fbd .fbd-tab.active { color:var(--gold-soft); }
#fbd .fbd-tab.active::after {
  content:""; position:absolute; left:18px; right:18px; bottom:0; height:2px;
  background:var(--gold);
}

/* ---------- LAYOUT ---------- */
#fbd .fbd-guide { display:none; }
#fbd .fbd-guide.active { display:block; }
#fbd .fbd-wrap {
  max-width:1120px; margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:240px 1fr; gap:48px;
}
@media (max-width:880px){ #fbd .fbd-wrap { grid-template-columns:1fr; gap:0; } }

/* sidebar section nav */
#fbd .fbd-side {
  position:sticky; top:78px; align-self:start;
  padding:40px 0; max-height:calc(100vh - 78px); overflow:auto;
}
#fbd .fbd-side h4 { font-family:var(--display); color:var(--gold); font-size:14px; letter-spacing:.28em; text-transform:uppercase; margin-bottom:14px; font-weight:600; }
#fbd .fbd-side a {
  display:block; border:none; color:var(--ink-soft);
  font-size:15.5px; padding:6px 0; line-height:1.4;
}
#fbd .fbd-side a:hover { color:var(--gold-soft); padding-left:6px; }
@media (max-width:880px){
  #fbd .fbd-side { position:static; max-height:none; padding:18px 0 6px; border-bottom:1px solid var(--line); }
  #fbd .fbd-side .fbd-navlinks { display:flex; flex-wrap:wrap; gap:6px 16px; }
}

/* content */
#fbd .fbd-content { padding:40px 0 80px; max-width:760px; }
#fbd section.fbd-sec { padding-top:34px; margin-top:34px; border-top:1px solid var(--line); scroll-margin-top:86px; }
#fbd #t-la { scroll-margin-top:90px; }
#fbd .fbd-banner { background:linear-gradient(90deg, rgba(155,35,53,.22), rgba(203,161,78,.14)); border:1px solid var(--gold); border-radius:8px; padding:14px 18px; margin:18px 0 4px; font-size:15px; }
#fbd .fbd-banner a { color:var(--gold-soft); font-weight:600; }
#fbd details.fbd-archive { margin:20px 0 6px; border:1px solid var(--line); border-radius:8px; background:rgba(255,255,255,.02); }
#fbd details.fbd-archive > summary { cursor:pointer; padding:12px 16px; font-family:'Cormorant Garamond',serif; font-size:20px; color:var(--gold-soft); letter-spacing:.02em; }
#fbd details.fbd-archive[open] > summary { border-bottom:1px solid var(--line); margin-bottom:8px; }
#fbd details.fbd-archive > *:not(summary) { padding:0 16px; }
#fbd section.fbd-sec:first-child { border-top:none; margin-top:0; }
#fbd .fbd-content h2 {
  font-family:var(--display); font-weight:600;
  font-size:clamp(30px,5vw,44px); line-height:1.05;
  color:#fff; margin-bottom:8px; letter-spacing:.5px;
}
#fbd .fbd-content h2 .num { color:var(--gold); font-style:italic; margin-right:12px; }
#fbd .fbd-content h3 {
  font-family:var(--display); font-weight:600; font-size:25px;
  color:var(--gold-soft); margin:30px 0 8px;
}
#fbd .fbd-content p { margin:14px 0; color:var(--ink); }
#fbd .fbd-content ul, #fbd .fbd-content ol { margin:14px 0 14px 22px; }
#fbd .fbd-content li { margin:9px 0; }
#fbd .fbd-content strong { color:#fff; font-weight:600; }
#fbd .fbd-content em { color:var(--gold-soft); }

/* callout / TL;DR card */
#fbd .fbd-card {
  background:linear-gradient(180deg, var(--panel), rgba(27,23,34,0.5));
  border:1px solid var(--line);
  border-left:3px solid var(--gold);
  padding:22px 26px; margin:22px 0; border-radius:2px;
}
#fbd .fbd-card h3 { margin-top:0; }
#fbd .fbd-card.crimson { border-left-color:var(--crimson); }

#fbd .fbd-tip {
  background:rgba(155,35,53,0.10);
  border:1px solid rgba(155,35,53,0.4);
  padding:14px 18px; border-radius:2px; margin:18px 0;
  font-style:italic;
}

/* support / Ko-fi block */
#fbd .fbd-support {
  text-align:center; background:var(--panel); border:1px solid var(--line);
  padding:26px; margin:26px 0; border-radius:2px;
}
#fbd .fbd-btn {
  display:inline-block; font-family:var(--display); font-weight:600;
  font-size:18px; letter-spacing:.04em;
  padding:11px 28px; border-radius:2px;
  background:var(--gold); color:#1a1410; border:1px solid var(--gold);
}
#fbd .fbd-btn:hover { background:var(--gold-soft); color:#1a1410; border-color:var(--gold-soft); }
#fbd .fbd-btn-alt { background:transparent; color:var(--gold-soft); border-color:var(--gold); }
#fbd .fbd-btn-alt:hover { background:rgba(203,161,78,0.12); color:#fff; }
#fbd .fbd-shop-btns { display:flex; flex-wrap:wrap; gap:12px; margin:6px 0 4px; }
#fbd .fbd-aff-note { font-size:13px; color:var(--ink-soft); font-style:italic; margin:14px 0 0; }
#fbd .fbd-reel-row { display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin:22px 0; }
#fbd .fbd-reel-row .instagram-media { margin:0 !important; flex:0 1 330px; min-width:300px; }
#fbd .fbd-thumb { flex:0 1 200px; max-width:230px; display:flex; flex-direction:column; text-decoration:none; border:0; color:var(--ink); }
#fbd a.fbd-thumb:hover { color:#fff; }
#fbd .fbd-thumb-media { position:relative; width:100%; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:#1b1722 center/cover no-repeat; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:transform .15s, border-color .15s; }
#fbd a.fbd-thumb:hover .fbd-thumb-media { transform:translateY(-2px); border-color:var(--gold); }
#fbd .fbd-thumb-ig { background:radial-gradient(120% 120% at 30% 20%, rgba(155,35,53,0.45), rgba(27,23,34,1) 62%); }
#fbd .fbd-thumb-yt { aspect-ratio:16/9; }
#fbd .fbd-play { width:46px; height:46px; border-radius:50%; background:rgba(12,10,15,0.55); border:1.6px solid rgba(255,255,255,0.85); }
#fbd .fbd-play::after { content:""; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%); border-style:solid; border-width:9px 0 9px 15px; border-color:transparent transparent transparent #fff; }
#fbd .fbd-thumb-cap { font-size:14px; line-height:1.35; margin-top:8px; color:var(--ink-soft); }
#fbd a.fbd-thumb:hover .fbd-thumb-cap { color:var(--gold-soft); }
#fbd .fbd-vidlist { line-height:2; }

/* FAQ accordion */
#fbd details.fbd-faq {
  border-bottom:1px solid var(--line); padding:6px 0;
}
#fbd details.fbd-faq > summary {
  font-family:var(--display); font-size:21px; color:var(--gold-soft);
  cursor:pointer; list-style:none; padding:14px 30px 14px 0; position:relative; font-weight:600;
}
#fbd details.fbd-faq > summary::-webkit-details-marker { display:none; }
#fbd details.fbd-faq > summary::after {
  content:"+"; position:absolute; right:4px; top:12px; color:var(--gold); font-size:24px; transition:transform .2s;
}
#fbd details.fbd-faq[open] > summary::after { content:"\2013"; }
#fbd details.fbd-faq > div { padding:0 0 14px; color:var(--ink-soft); }

/* tables */
#fbd .fbd-tablewrap { overflow-x:auto; margin:20px 0; border:1px solid var(--line); border-radius:2px; }
#fbd table { width:100%; border-collapse:collapse; font-size:15px; min-width:560px; }
#fbd th, #fbd td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
#fbd th { font-family:var(--display); font-weight:600; color:var(--gold); letter-spacing:.04em; background:rgba(203,161,78,0.06); }
#fbd tr:last-child td { border-bottom:none; }

/* Instagram embed slot styling (the placeholder box, not the real embed) */
#fbd .fbd-ig-slot {
  border:1px dashed var(--line); border-radius:2px;
  padding:20px; margin:20px 0; text-align:center; color:var(--ink-soft);
  font-style:italic; font-size:15px;
}
#fbd .instagram-media { margin:20px auto !important; }
#fbd .fbd-yt { position:relative; width:100%; max-width:640px; margin:26px auto; aspect-ratio:16/9; border:1px solid var(--line); border-radius:3px; overflow:hidden; }
#fbd .fbd-yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }

/* placeholder tab */
#fbd .fbd-placeholder {
  max-width:760px; margin:60px auto; text-align:center; padding:0 24px;
}
#fbd .fbd-placeholder h2 { font-family:var(--display); font-size:clamp(28px,5vw,40px); color:#fff; margin-bottom:14px; }
#fbd .fbd-placeholder p { color:var(--ink-soft); }

/* footer */
#fbd .fbd-footer {
  text-align:center; padding:54px 24px; border-top:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg), var(--bg2));
}
#fbd .fbd-footer h3 { font-family:var(--display); font-size:30px; color:var(--gold-soft); margin-bottom:10px; }
#fbd .fbd-footer p { color:var(--ink-soft); max-width:560px; margin:0 auto 18px; }
#fbd .fbd-footer .fbd-links { font-size:15px; letter-spacing:.06em; }
#fbd .fbd-footer .fbd-links a { border:none; margin:0 8px; }
#fbd .fbd-disc { font-size:13px; color:#6f6a60; margin-top:24px; font-style:italic; max-width:640px; margin-left:auto; margin-right:auto; }

/* ===== mobile hardening ===== */
html, body { max-width:100%; overflow-x:hidden; }
#fbd .fbd-content, #fbd .fbd-side { min-width:0; }
#fbd .fbd-content { overflow-wrap:break-word; }
#fbd .fbd-tablewrap { max-width:100%; }
@media (max-width:760px){
  #fbd { font-size:17px; }
  #fbd .fbd-wrap { padding:0 16px; }
  #fbd .fbd-content { padding:26px 0 56px; max-width:100%; }
  #fbd .fbd-hero { padding:64px 18px 44px; }
  #fbd .fbd-tabs { flex-wrap:wrap; }
  #fbd .fbd-tab { padding:12px 14px; font-size:16px; }
  #fbd .fbd-tab.active::after { left:14px; right:14px; }
  #fbd .fbd-reel-row { gap:16px; }
  #fbd .fbd-reel-row .instagram-media, #fbd .fbd-reel-row .ig-lazy,
  #fbd .instagram-media, #fbd .ig-lazy { min-width:0 !important; flex:1 1 100% !important; width:100% !important; max-width:100% !important; }
  #fbd table { font-size:14px; }
  #fbd .fbd-shop-btns .fbd-btn { width:100%; text-align:center; }
}

/* ---------- HUB PAGE CARDS (phantomguides.html) ---------- */
/* Always a 2x2 block of four production cards, at every screen width. */
#fbd .fbd-hubgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:24px; }
#fbd a.fbd-hubcard { display:block; border:1px solid var(--line); border-left:3px solid var(--gold);
  background:linear-gradient(180deg, var(--panel), rgba(27,23,34,0.5)); padding:24px 26px; border-radius:2px;
  transition:border-color .2s, transform .2s; }
#fbd a.fbd-hubcard:hover { border-color:var(--gold); transform:translateY(-3px); }
#fbd a.fbd-hubcard h3 { font-family:var(--display); font-size:26px; font-weight:600; color:var(--gold-soft); margin:0 0 8px; }
#fbd a.fbd-hubcard p { color:var(--ink-soft); font-size:16px; margin:0 0 14px; }
#fbd .fbd-hubgo { font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
#fbd .fbd-hubcities { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:20px; }
#fbd a.fbd-hubcity { display:block; border:1px solid var(--line); border-radius:2px; padding:14px 16px;
  background:rgba(255,255,255,.02); transition:border-color .2s; }
#fbd a.fbd-hubcity:hover { border-color:var(--gold); }
#fbd a.fbd-hubcity strong { display:block; color:var(--ink); font-size:17px; }
#fbd a.fbd-hubcity span { display:block; color:var(--ink-soft); font-size:14px; margin-top:2px; }
#fbd .fbd-hubflash { border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(203,161,78,.35); }

@media (max-width:600px){
  #fbd .fbd-hubgrid { gap:12px; }
  #fbd a.fbd-hubcard { padding:18px 16px; }
  #fbd a.fbd-hubcard h3 { font-size:21px; }
  #fbd a.fbd-hubcard p { font-size:14.5px; }
  #fbd .fbd-hubgo { font-size:12px; letter-spacing:.08em; }
}