/* ============================================================
   OK DANCESPORT — SITE CHROME
   Shared across every flattened page: design-system Button,
   image-slot frames, sticky header nav, and footer. Link this
   after _ds/styles.css. Page-specific styles stay inline per page.
   ============================================================ */

/* ---- page ground + link default ---- */
body { margin: 0; background: var(--ok-cream); }
a { color: var(--ok-rust); }
a:hover { color: var(--ok-red); }

/* ---- design-system Button (flattened from components/core/Button.jsx) ---- */
.ok-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:0.03em;line-height:1;border:2px solid transparent;border-radius:var(--radius-none);cursor:pointer;text-decoration:none;transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.ok-btn:active{transform:translateY(2px)}
.ok-btn--sm{padding:6px 14px;font-size:13px}
.ok-btn--md{padding:10px 22px;font-size:15px}
.ok-btn--lg{padding:14px 32px;font-size:18px}
.ok-btn--cta{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.ok-btn--cta:hover{color:var(--cta-ink)}
.ok-btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.ok-btn--primary:hover{color:var(--accent-ink)}
.ok-btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.ok-btn--secondary:hover{color:var(--ink)}

/* ---- photo slots (flattened image-slots): drop-in <img> frames ---- */
.ok-photo-slot{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:18px;background:repeating-linear-gradient(45deg,rgba(140,126,106,0.10),rgba(140,126,106,0.10) 10px,transparent 10px,transparent 20px);color:var(--ok-warm-gray);font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase}
.ok-photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---- content helpers ---- */
.ok-wrap{max-width:1100px;margin:0 auto}
.ok-block-rule{border-top:8px solid var(--ok-black);margin:10px 0 0}

/* ---- responsive stack (grids collapse to 1 col on mobile) ---- */
@media (max-width:760px){
.m-stack{grid-template-columns:1fr !important}
.m-stack>*{grid-column:auto !important}
}

/* ---- SITE HEADER ---- */
.ok-hdr{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;position:sticky;top:0;z-index:20;padding:12px 28px;background:var(--ok-charcoal);border-bottom:3px solid var(--ok-sand)}
.ok-hdr-nav{display:flex;align-items:center;gap:10px 26px}
.ok-hdr-link{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:15px;color:var(--ok-cream);text-decoration:none;white-space:nowrap;padding:4px 0 2px;display:inline-block;border-bottom:3px solid transparent}
.ok-hdr-link:hover{color:var(--ok-cream)}
.ok-hdr-link--active{border-bottom-color:var(--ok-rust)}
.ok-nav-group{position:relative}
.ok-nav-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:200px;background:var(--ok-charcoal);border:1px solid rgba(212,196,160,0.4);border-top:3px solid var(--ok-rust);padding:8px 0;z-index:30}
@media (hover: hover){.ok-nav-group:hover .ok-nav-menu,.ok-nav-group:focus-within .ok-nav-menu{display:block}}
.ok-nav-group[data-open] .ok-nav-menu{display:block}
@media (max-width: 900px){
.ok-nav-group[data-open]{position:static}
.ok-nav-group[data-open] .ok-nav-menu{left:0;right:0;transform:none;width:100%;min-width:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 8px}
}
.ok-nav-item{display:block;padding:9px 18px;font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ok-sand);text-decoration:none;white-space:nowrap}
.ok-nav-item:hover{color:var(--ok-cream);background:rgba(237,230,211,0.07)}
@media (max-width: 900px){
.ok-hdr{justify-content:center}
.ok-hdr-nav{width:100%;justify-content:center;flex-wrap:wrap;gap:8px 18px;border-top:1px solid rgba(212,196,160,0.3);padding-top:10px}
.ok-hdr-link{font-size:14px;letter-spacing:0.04em}
}

/* ---- SITE FOOTER ---- */
.ok-ftr{background:var(--ok-charcoal);color:var(--ok-cream);padding:40px 28px 28px}
.ok-ftr-link{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ok-sand);text-decoration:none}
.ok-ftr-link:hover{color:var(--ok-cream)}

/* ---- generic page hero (interior pages) ---- */
.ok-page-hero{background:var(--ok-charcoal);color:var(--ok-cream);padding:56px 28px 48px}
.ok-page-hero h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(38px,6vw,58px);line-height:0.98;margin:6px 0 0;color:var(--ok-cream)}
.ok-page-body{padding:52px 28px}
.ok-tbd{font-family:var(--font-mono);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ok-warm-gray);border:1px dashed var(--ok-warm-gray);padding:22px;text-align:center}