:root{
  /* darker palette */
  --bg:#0b0b0d; /* page background */
  --ink:#f6f7f8;
  --muted:#bfc4cc;
  --brand:#ff3b00;
  --brand-2:#ff9a00;
  /* announce background can be adjusted here */
  --announce-bg: linear-gradient(90deg,#d94b00,#ff6a00);
  /* default larger value to prevent initial overlap while JS measures real height */
  --announce-height:88px;
  --util-height:48px;
  --header-height:64px;
  /* small adjustable buffer between header stack and anchored headings */
  --anchor-buffer: 0px;
  --border:rgba(255,255,255,0.06);
  --surface:#0f1113;
  --text-on-white:#111217; /* dark text for white surfaces */
  /* logo font sizes: desktop vs mobile */
  --logo-desktop:50px;
  --logo-mobile:30px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:linear-gradient(180deg,var(--bg),#0f1012);color:var(--ink);font-family:'Staatliches', 'Alegreya', Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;overflow-x:hidden;text-transform:uppercase}
/* Reserve vertical space at top equal to util+announce+header so fixed top bars don't cover content */
body{padding-top:calc(var(--util-height) + var(--announce-height) + var(--header-height));}
/* smooth in-page scrolling */
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{opacity:.92}
.container{width:min(1240px,92%);margin-inline:auto;padding-inline:4px}
.header-spacer{height:8px}
header.nav{position:fixed;top:calc(var(--util-height) + var(--announce-height));left:0;right:0;z-index:110;background:linear-gradient(180deg,rgba(0,0,0,0.55),rgba(0,0,0,0.35));backdrop-filter:blur(6px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 auto}
.logo img{height:96px}
.logo strong{font-weight:900;letter-spacing:.2px;font-size:34px;display:inline-block;max-width:100%;vertical-align:middle}
/* Brand wrap stacks the brand text with a small pill under the logo image */
.logo .brand-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.logo .brand-wrap .pill{margin:0;padding:0;font-size:12px;line-height:1;background:transparent;color:inherit;border:0}
/* Prevent the logo text from overlapping nav links: truncate if it exceeds the max-width */
.logo .brand-chick,.logo .brand-rest{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo .brand-chick{color:var(--brand);margin-right:4px;font-size:clamp(20px,4.5vw,var(--logo-desktop))}
.logo .brand-rest{color:var(--brand);opacity:1;font-weight:800;font-size:clamp(20px,4.5vw,var(--logo-desktop))}
.navlinks{display:flex;gap:18px;align-items:center;flex:1 1 auto;justify-content:flex-end;min-width:0}
.navlinks a{position:relative;padding:8px 0;color:var(--brand)}
.navlinks a:after{content:"";position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--brand);transition:width .2s}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover:after{width:100%}
.nav-toggle{display:none}
.btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#23140a;padding:12px 18px;border-radius:999px;font-weight:800;border:0;cursor:pointer;box-shadow:0 10px 28px rgba(255,59,0,.2);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 32px rgba(0,0,0,0.25)}
.btn.secondary{background:#fff;border:1px solid var(--border);box-shadow:none;color:var(--brand)}

.util-bar{position:fixed;top:0;left:0;right:0;z-index:130;background:linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.6));backdrop-filter:blur(8px);color:var(--ink);} 
.util-inner{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-weight:700;font-size:14px}
.util-link{color:var(--ink);margin-right:0;text-decoration:none}
.util-link:hover{opacity:.9}
.util-left,.util-right{display:flex;align-items:center;gap:6px}

/* Force the left util group to hug the left inside .util-inner */
.util-inner .util-left{margin-inline-start:0;margin-right:auto}

/* Ensure util icons are compact and consistent */
.util-icon{width:34px;height:34px;padding:0}
.util-icon img{width:18px;height:18px;display:block}

.util-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:transparent;color:var(--ink)}
.util-icon svg{display:block}
.util-icon img{display:block;width:18px;height:18px}
.util-icon:hover{background:rgba(255,255,255,0.04)}
.util-icon[data-action="fb"]{color:#1877F2;background:transparent}
.util-icon[data-action="tiktok"]{color:inherit;background:transparent}
.util-icon[data-action="tiktok"]:hover{opacity:0.95}

/* modal for util actions */
.util-modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:200}
.util-modal[aria-hidden="false"]{display:flex}
.util-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5)}
.util-modal-panel{position:relative;background:linear-gradient(180deg,#fff,#fafafa);color:#111;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.4);max-width:560px;width:92%;padding:18px;z-index:2}
.util-modal-close{position:absolute;right:10px;top:8px;background:transparent;border:0;font-size:28px;cursor:pointer}
.util-modal a{color:var(--brand);}


.announce{position:fixed;top:var(--util-height);left:0;right:0;z-index:120;background:var(--announce-bg);color:#fff;padding:10px 12px;font-weight:800;letter-spacing:.3px;white-space:normal;line-height:1.2;text-align:center;overflow-wrap:break-word}
.announce a{color:#fff;text-decoration:underline}

.hero{padding:12px 0 18px;background:linear-gradient(180deg,rgba(0,0,0,0.28),var(--surface));}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:start}
.hero h1{font-size:38px;line-height:1.02;margin:6px 0 6px;font-family:'Staatliches', 'Alegreya', serif;font-weight:900}
.hero p.lead{font-size:15px;color:var(--muted);max-width:64ch}
.hero-media{border-radius:20px;overflow:hidden;border:1px solid var(--border);min-height:0;background:#0f0f10}
.hero-media .bg{height:auto;min-height:0;background-size:cover;background-position:center;position:relative;aspect-ratio:16/9}
.hero-media .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0.15),rgba(0,0,0,0.45));mix-blend-mode:multiply}

.section{padding:48px 0}
.section.bg-hero{position:relative;padding:100px 0;display:block}
.section.bg-hero .container{position:relative;z-index:2}
.section.bg-hero::before{content:"";position:absolute;inset:0;background:var(--bg-image, linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.06)));background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(1.08) contrast(1.02) saturate(1.06);z-index:1}
.section.bg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.45),rgba(0,0,0,0.55));z-index:1}
.section.bg-hero h2,.section.bg-hero p{color:#fff}
.section.bg-hero .rail{opacity:1}
@media (max-width:980px){
  .section.bg-hero{padding:72px 0}
}
@media (max-width:640px){
  .section.bg-hero{padding:56px 0}
}

/* Make the top hero compatible with the bg-hero treatment */
.hero.bg-hero{position:relative;padding:56px 0;background:transparent}
.hero.bg-hero .container{position:relative;z-index:2}
.hero.bg-hero::before{content:"";position:absolute;inset:0;background:var(--bg-image, linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.06)));background-size:cover;background-position:center;background-repeat:no-repeat;filter:brightness(1.06) contrast(1.02) saturate(1.04);z-index:1}
.hero.bg-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.18),rgba(0,0,0,0.45));z-index:1}
.hero.bg-hero h1,.hero.bg-hero p.lead,.hero.bg-hero .pill{color:#fff}
.hero.bg-hero .pill{background:rgba(255,255,255,0.06);color:#fff;border:1px solid rgba(255,255,255,0.06)}
/* vertically center the grid items and limit hero image height to prevent large gaps */
.hero-grid{align-items:center}
/*.hero-media img{max-height:420px;object-fit:cover;border-radius:16px}*/
.section h2{font-size:36px;margin:0 0 8px;font-family:'Staatliches', 'Alegreya', serif;font-weight:900}
.section p.sub{color:var(--muted);margin:0 0 16px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(10,12,28,.04);color:var(--text-on-white)}

.tile{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--border);height:340px;background:#0b0b0b;transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(0,0,0,0.35)}
.tile.bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.tile .cap{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);padding:6px 14px;border-radius:999px;font-weight:900;color:var(--brand)}

.rail{display:flex;gap:12px;overflow-x:auto;padding:8px 6px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rail > *{scroll-snap-align:start;flex:0 0 auto}

/* Instagram feed: make tiles look like posts with consistent aspect and snap */
.rail.ig-rail{padding:12px 6px;gap:14px}
.rail.ig-rail .img{flex:0 0 280px;scroll-snap-align:center;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:#0b0b0d}
.rail.ig-rail .img img{width:100%;height:100%;object-fit:cover;display:block}
.rail.ig-rail .tile{flex:0 0 320px;height:560px;scroll-snap-align:center;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,0.04);background:#0b0b0d}

/* Lightbox preview styles (re-using util-modal) */
.preview-media{max-width:960px;width:92%;max-height:86vh;border-radius:12px;overflow:hidden;background:#000}
.preview-media img,.preview-media video{width:100%;height:100%;object-fit:contain;display:block}

/* Vertical / portrait video handling for YouTube embeds */
.embed-yt.portrait{max-width:420px;min-width:260px;aspect-ratio:9/16;border-radius:12px}
.embed-yt.portrait iframe{border-radius:12px}
.embed-yt.landscape{aspect-ratio:16/9}

@media (max-width:640px){
  .rail.ig-rail .img{flex:0 0 72vw}
  .rail.ig-rail .tile{flex:0 0 78vw;height:78vw}
}

.gallery .img{width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#fff;color:var(--text-on-white);flex:0 0 auto}
.gallery .img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .32s ease}
.gallery .img img:hover{transform:scale(1.03)}

/* Ensure anchored sections place their headings below the sticky stacked bars */
section[id], [id]{
  /* align section headings directly below the stacked sticky bars; --anchor-buffer is tweakable */
  scroll-margin-top: calc(var(--announce-height) + var(--util-height) + var(--header-height) + var(--anchor-buffer));
}

/* pill used in hero - ensure readable on white background */
.pill{display:inline;vertical-align:middle;padding:0;color:var(--muted);font-weight:700}

.embed-yt{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--border)}
.embed-yt iframe{position:absolute;inset:0;width:100%;height:100%;}
.embed-vid{position:relative;width:100%;max-width:560px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;border:1px solid var(--border)}
.embed-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.embed-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.footer{padding:36px 0;border-top:1px solid var(--border);color:var(--muted);background:linear-gradient(180deg,var(--surface),#0b0b0b)}
.footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px}

/* Footer-specific logo sizing and link colors to prevent overlap */
.footer .logo{max-width:100%;gap:8px}
.footer .logo img{height:40px}
.footer .logo strong{font-size:18px;line-height:1;margin:0}
.footer .logo .brand-chick,.footer .logo .brand-rest{font-size:18px}
.footer .logo .brand-chick{margin-right:6px}
.footer a{color:#fff}
.footer a:hover{opacity:.9}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .grid-3{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  .navlinks{display:none;position:absolute;top:calc(var(--announce-height) + var(--util-height) + var(--header-height));right:12px;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:12px;flex-direction:column;min-width:200px;max-width:86vw}
  .navlinks a{padding:8px 0;color:var(--brand)}
  .nav-toggle{display:inline-flex;background:transparent;border:0;color:var(--ink);font-size:24px;cursor:pointer}
  header.nav.nav-open .navlinks{display:flex}
  /* smaller logo image on mobile but keep text larger than before */
  .logo img{height:56px}
  .logo strong{font-size:20px}
  .logo .brand-chick{font-size:var(--logo-mobile)}
  .logo .brand-rest{font-size:var(--logo-mobile)}
  /* keep brand-wrap stacked on small screens */
  .logo .brand-wrap{gap:2px}
  /* ensure nav links wrap and stack neatly */
  .navlinks{flex-wrap:wrap}
  .grid-3{grid-template-columns:1fr}
}

/* Restore Alegreya Black for brand and major headings (override global Staatliches and uppercase) */
.logo strong,
.logo .brand-chick,
.logo .brand-rest,
.logo .brand-wrap .pill,
.hero h1,
.section h2 {
  font-family: 'Alegreya', serif;
  font-weight: 900;
  text-transform: none; /* keep natural case for these key headings */
  letter-spacing: 0.2px;
}