/* Oyster Boys + Bird Boys — shared styles. Brand colors switch on <body class="oyster"> / <body class="bird">. */
:root{--bg:#ECEDE7;--ink:#1F2726;--deep:#2E3B3A;--acc:#5F6E52;--muted:#545C59;--off:#D9DBD4;--card:#FFFFFF;--light:#F6F4EE}
body.bird{--bg:#EDF1F6;--ink:#17243A;--deep:#2B4F7E;--acc:#A64E22;--muted:#4A5668;--off:#D3DCE7}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Work Sans',system-ui,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit}

/* ---------- Brand switcher ---------- */
.bar{display:flex;flex-wrap:nowrap}
.pane{display:flex;align-items:center;gap:14px;padding:14px 20px;min-height:84px;text-decoration:none;color:inherit}
.pane.on{flex:1 1 auto;background:var(--deep);color:var(--light)}
.pane.off{flex:0 0 auto;background:var(--off);color:var(--ink)}
.pane.off:hover,.pane.off:focus-visible{filter:brightness(.95)}
.dot{width:56px;height:56px;border-radius:50%;background:var(--light);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.dot img{width:44px;height:44px;object-fit:contain}
.txt{display:flex;flex-direction:column;gap:3px}
.nm{font-family:'Libre Baskerville',Georgia,serif;font-size:24px;line-height:1.1}
.pane.off .nm{font-size:16px}
.sub{font-size:13px;opacity:.8}
.pane.on h1{margin:0;font-weight:400}

/* ---------- Page ---------- */
main{max-width:760px;margin:0 auto;padding:40px 20px 56px;display:flex;flex-direction:column;gap:48px}
.hero{display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center}
.hero img{width:72%;max-width:340px;height:auto}
.hero p{margin:0;font-size:19px;max-width:560px}

.event{background:var(--deep);color:var(--light);border-radius:22px;padding:28px 26px;display:flex;flex-direction:column;gap:8px}
.event .label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.event .big{font-family:'Libre Baskerville',Georgia,serif;font-size:32px;line-height:1.2}
.event .note{font-size:16px;opacity:.85}

.ig{display:flex;flex-direction:column;gap:18px}
.kick{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.h2{margin:0;font-family:'Libre Baskerville',Georgia,serif;font-size:34px;font-weight:400;line-height:1.15;overflow-wrap:anywhere}
.feed-empty{border:1.5px dashed rgba(0,0,0,.18);border-radius:16px;padding:28px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--muted)}
.feed-empty img{width:96px;height:auto;opacity:.85}

.contact{display:flex;flex-direction:column;gap:14px;align-items:center;text-align:center;padding:8px 0}
.contact p{margin:0;font-size:17px;color:var(--muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--acc);color:#fff;text-decoration:none;font-weight:600;font-size:17px}
.btn:hover{filter:brightness(.92)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.ig .btn{align-self:flex-start}

footer{text-align:center;font-size:13px;color:var(--muted);padding:0 20px 32px}

a:focus-visible,.pane:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

@media (max-width:600px){
  .pane{padding:12px 14px;gap:10px;min-height:72px}
  .dot{width:46px;height:46px}.dot img{width:36px;height:36px}
  .nm{font-size:20px}
  .pane.off .txt{display:none}
  .h2{font-size:28px}
  .btn,.ig .btn{width:100%;align-self:stretch}
}

/* Instagram handle links */
.handle{text-decoration:none}
.handle:hover{text-decoration:underline}
.event .note a{text-decoration:underline;text-underline-offset:3px}
footer{letter-spacing:.14em;font-weight:600}

/* Instagram feed (Behold) */
#ig-feed{min-height:120px}
#ig-feed behold-widget{display:block;border-radius:12px;overflow:hidden}