/* CRAFT SOCIAL CLUB / 2026-10-29 NAVIGATION REVISION
   Main navigation sits directly on the first page background, like the Photoshop mockups.
   Real Orator Std comes from Adobe Fonts web project ojg2uta. */
.site-header{position:fixed;top:0;left:0;right:0;width:100%;z-index:90;background:transparent!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;box-shadow:none;transition:background-color .22s ease,box-shadow .22s ease}
.site-header .header-inner{height:96px;width:min(1540px,calc(100% - 64px));gap:20px;transition:height .2s ease}
.site-header .header-brand{width:clamp(140px,13vw,180px);flex-shrink:0}
.site-header .primary-nav{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:clamp(13px,2vw,32px)}
.site-header .primary-nav a{font-family:'orator-std','Orator Std','Courier New',monospace!important;font-weight:400!important;font-size:clamp(11px,.9vw,14px);letter-spacing:.06em;line-height:1.5;color:#b80e2a;text-decoration:none;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.site-header .primary-nav a:is(:hover,:focus-visible),.site-header .primary-nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.site-header .header-rule{display:block;height:auto;width:100%;max-height:32px;object-fit:contain;object-position:center;pointer-events:none}
.site-header.is-scrolled{background:rgba(255,251,246,.96)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;box-shadow:0 2px 10px rgba(102,45,58,.07)}
.site-header.is-scrolled .header-inner{height:74px}
/* Content now begins behind the transparent navigation; protect foreground readability. */
.hero .hero-stage{padding-top:145px}
.workshop-detail-hero{padding-top:162px!important}
.workshop-index-section{padding-top:157px!important}
.shop-page{padding-top:165px!important}
.interior-title{padding-top:170px!important;min-height:375px}
/* Because the fixed header is not in document flow, anchor jumps need room. */
html{scroll-padding-top:120px}
@media(max-width:1080px){
.site-header .header-inner{width:calc(100% - 38px)}
.site-header .primary-nav{gap:clamp(8px,1.25vw,16px)}
.site-header .primary-nav a{font-size:clamp(10px,.88vw,12px);letter-spacing:0}
.site-header .header-brand{width:145px}
}
@media(max-width:760px){
.site-header .header-inner{height:76px;width:calc(100% - 34px)}
.site-header.is-scrolled .header-inner{height:66px}
.site-header .header-brand{width:138px}
.site-header .menu-toggle{display:flex;z-index:2}
.site-header .primary-nav{position:absolute;top:calc(100% - 1px);left:0;right:0;display:none;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;background:rgba(255,250,245,.99);padding:14px 25px 24px;border-bottom:3px solid #b80e2a;box-shadow:0 10px 18px rgba(52,33,40,.10)}
.site-header .primary-nav.is-open{display:flex}
.site-header .primary-nav a{display:block;padding:13px 9px;font-size:14px;letter-spacing:.08em;text-shadow:none;border-bottom:1px solid #e9c6c7}
.site-header.menu-open{background:rgba(255,250,245,.99)!important}
.hero .hero-stage{padding-top:105px}
.workshop-detail-hero{padding-top:124px!important}
.workshop-index-section{padding-top:130px!important}
.shop-page{padding-top:137px!important}
.interior-title{padding-top:132px!important;min-height:310px}
html{scroll-padding-top:96px}
}
@media(prefers-reduced-motion:reduce){.site-header,.site-header .header-inner{transition:none}}