@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=DM+Sans:wght@500;700&family=Space+Grotesk:wght@500;700&display=swap");

.bf-page{
  --bf-bg:#050910;
  --bf-ink:#eef3fa;
  --bf-mute:rgba(238,243,250,.68);
  --bf-line:rgba(255,255,255,.12);
  --bf-accent:#f0d78c;
  background:
    radial-gradient(800px 420px at 90% -10%, rgba(240,215,140,.12), transparent 55%),
    linear-gradient(165deg,#050910,#0b1220 50%,#061018);
  color:var(--bf-ink);
  min-height:100vh;
  font-family:"DM Sans",system-ui,sans-serif;
}
.bf-page .ice-lines{opacity:.04;pointer-events:none}
.bf-page .site-header{background:rgba(5,9,16,.8);backdrop-filter:blur(12px)}

.bf-hero{padding:5.5rem 4vw 1.5rem}
.bf-hero-inner{max-width:1100px;margin:0 auto}
.bf-hero .eyebrow{
  font-size:.68rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--bf-accent);
}
.bf-hero h1{
  font-family:"Bricolage Grotesque",Georgia,serif;
  font-size:clamp(2.6rem,9vw,4.8rem);line-height:.92;letter-spacing:.02em;margin:.4rem 0 .7rem;
}
.bf-hero h1 span{color:var(--bf-accent)}
.bf-hero .lede{max-width:40rem;color:var(--bf-mute);line-height:1.5;font-size:1.02rem}

.bf-brand-switch{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.bf-brand-switch button{
  min-height:var(--touch, 44px);padding:0 .95rem;border-radius:999px;cursor:pointer;border:1px solid var(--bf-line);
  background:rgba(255,255,255,.04);color:var(--bf-ink);font:inherit;font-weight:800;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.bf-brand-switch button.is-on{
  background:var(--bf-accent);color:#111;border-color:transparent;
}

.bf-tabs{
  display:flex;flex-wrap:nowrap;gap:.35rem;max-width:1100px;margin:0 auto;padding:.5rem 4vw 0;
  position:sticky;top:var(--header-h, 64px);z-index:40;background:rgba(5,9,16,.92);backdrop-filter:blur(10px);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.bf-tabs::-webkit-scrollbar{display:none}
.bf-tabs button{
  flex:0 0 auto;
  min-height:var(--touch, 44px);padding:0 .85rem;border:0;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--bf-mute);font:inherit;font-weight:800;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;
}
.bf-tabs button.is-on{background:rgba(240,215,140,.14);color:var(--bf-accent)}

.bf-wrap{max-width:1100px;margin:0 auto;padding:1.4rem 4vw calc(5rem + env(safe-area-inset-bottom))}
.bf-panel{display:none;scroll-margin-top:calc(var(--header-h, 64px) + 3rem)}
.bf-panel.is-on{display:block}
.bf-sec-head{margin-bottom:1.1rem}
.bf-sec-head h2{font-family:"Bricolage Grotesque",Georgia,serif;font-size:clamp(1.6rem,4vw,2.2rem);margin:0 0 .35rem}
.bf-sec-head p{color:var(--bf-mute);margin:0;max-width:48rem;line-height:1.45}

.bf-kit-grid{display:grid;gap:.85rem}
@media(min-width:800px){.bf-kit-grid{grid-template-columns:1fr 1fr}.bf-kit-grid .span2{grid-column:1/-1}}
.bf-card{
  border:1px solid var(--bf-line);border-radius:16px;padding:1rem 1.05rem;
  background:rgba(255,255,255,.03);
}
.bf-card h3{margin:0 0 .25rem;font-size:1rem}
.bf-card .hint{color:var(--bf-mute);font-size:.82rem;margin:0 0 .75rem;line-height:1.4}
.bf-logo-stage{
  min-height:120px;border-radius:12px;display:grid;place-items:center;margin-bottom:.55rem;
  background:var(--stage-bg,#0b1220);border:1px solid var(--bf-line);padding:1rem;
}
.bf-logo-stage.wide{min-height:88px}
.bf-logo-stage.dark{background:#0a0a0a}
.bf-logo-stage.light{background:#f5f5f5}
.bf-logo-stage canvas{max-width:100%;height:auto}
.bf-icon-row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}

.bf-swatches{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem}
@media(min-width:700px){.bf-swatches{grid-template-columns:repeat(4,1fr)}}
.bf-swatch{border-radius:12px;overflow:hidden;border:1px solid var(--bf-line);background:#111}
.bf-swatch .chip{height:72px}
.bf-swatch .meta{padding:.55rem .65rem;font-size:.75rem}
.bf-swatch .meta b{display:block;margin-bottom:.1rem}

.bf-type .disp{
  font-family:"Bricolage Grotesque",Georgia,serif;font-size:clamp(1.6rem,4vw,2.4rem);
  letter-spacing:.04em;margin-bottom:.45rem;
}
.bf-type .body{color:var(--bf-mute);line-height:1.45}
.bf-voice{margin:0;padding-left:1.1rem;color:var(--bf-mute);line-height:1.5}
.bf-voice li{margin:.3rem 0}

.bf-controls{
  display:grid;gap:.7rem;margin-bottom:1rem;padding:1rem;border-radius:16px;
  border:1px solid var(--bf-line);background:rgba(255,255,255,.03);
}
@media(min-width:800px){
  .bf-controls{grid-template-columns:1fr 1fr 1fr}
  .bf-controls .grow{grid-column:1/-1}
  .bf-controls .bf-actions{grid-column:1/-1}
}
.bf-controls label{
  display:grid;gap:.28rem;font-size:.65rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--bf-mute);
}
.bf-controls label span{text-transform:none;letter-spacing:0;font-weight:600;opacity:.8}
.bf-controls input,.bf-controls select,.bf-controls textarea{
  min-height:42px;border-radius:10px;border:1px solid var(--bf-line);
  background:rgba(0,0,0,.35);color:#fff;padding:.55rem .7rem;font:inherit;font-size:.92rem;
}
.bf-controls textarea{min-height:88px;resize:vertical}
.bf-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.bf-btn{
  min-height:44px;padding:0 1rem;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(180deg,#f0d78c,#d4af37);color:#1a1400;
  font:inherit;font-weight:800;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
}
.bf-btn.ghost{background:transparent;color:var(--bf-accent);border:1px solid rgba(240,215,140,.4)}

.bf-gallery{
  display:grid;gap:.85rem;grid-template-columns:1fr;
}
@media(min-width:700px){.bf-gallery{grid-template-columns:1fr 1fr}}
.bf-shot{
  border:1px solid var(--bf-line);border-radius:14px;overflow:hidden;background:#000;
}
.bf-shot canvas,.bf-shot img{width:100%;height:auto;display:block}
.bf-shot .bar{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.55rem .7rem;background:rgba(255,255,255,.04);font-size:.72rem;
}
.bf-shot .bar button{
  border:0;background:transparent;color:var(--bf-accent);font:inherit;font-weight:800;
  cursor:pointer;letter-spacing:.06em;text-transform:uppercase;font-size:.65rem;
}

.bf-refs{display:grid;gap:1rem}
@media(min-width:800px){.bf-refs{grid-template-columns:1fr 1fr}}
.bf-refs figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--bf-line);background:#111}
.bf-refs img{width:100%;height:auto;display:block}
.bf-refs figcaption{padding:.7rem .85rem;font-size:.82rem;color:var(--bf-mute);line-height:1.4}
.bf-note{color:var(--bf-mute);font-size:.88rem;line-height:1.5;margin-top:1rem}
.bf-note code{color:var(--bf-accent);font-size:.85em}

.bf-toast{
  position:fixed;left:50%;bottom:calc(1.5rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:120;
  background:#f0d78c;color:#1a1400;padding:.65rem 1rem;border-radius:999px;
  font-weight:800;font-size:.78rem;display:none;box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.bf-toast.is-on{display:block}