/* OverLoad public site. Uses tokens.css (same as the staff console). */
@keyframes up { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: .9 } 50% { transform: translateY(6px); opacity: .4 } }

* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--bg) radial-gradient(var(--dots) 1.5px, transparent 1.5px) 0 0 / 18px 18px; color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
img { display: block; max-width: 100% }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: var(--border); box-shadow: var(--shadow); font-family: var(--font-display); font-size: var(--fs-md); white-space: nowrap; transition: background .15s, border-color .15s, transform .1s }
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-md) } .btn:active { transform: translate(3px, 3px); box-shadow: none }
.btn-primary { background: var(--orange); color: var(--text-on-accent) }
.btn-primary:hover { background: var(--yellow) }
.btn-secondary { background: var(--surface-hover); color: var(--text) }
.btn-secondary:hover { background: var(--surface-hover) }
.btn-lg { padding: 16px 28px; font-size: var(--fs-xl); border: var(--border-thick); box-shadow: var(--shadow-md) }

/* nav */
.nav { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 48px); transition: background .3s, border-color .3s, backdrop-filter .3s; border-bottom: 1px solid transparent }
.nav.solid { background: var(--bg-sidebar); border-bottom: var(--border-thick) }
.nav-logo img { height: 40px; width: auto }
.nav-links { display: flex; gap: 4px; margin-left: auto }
.nav-links a { padding: 8px 12px; font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-2); transition: background .15s, color .15s }
.nav-links a:hover { background: var(--surface-hover); color: var(--text) }

/* hero */
.hero { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; background: var(--bg) }
.hero-media { position: absolute; inset: 0 }
.hero-media { background:
    radial-gradient(ellipse 60% 45% at 50% 42%, rgba(255, 106, 19, .28), transparent 70%),
    radial-gradient(var(--dots) 1.5px, transparent 1.5px) 0 0 / 18px 18px, var(--bg) }
.hero::after { z-index: 0; pointer-events: none; content: ''; position: absolute; left: -10%; right: -10%; bottom: -150px; height: 300px; background: var(--orange); transform: rotate(-4deg); border-top: 4px solid var(--ink-edge); box-shadow: 0 -10px 0 var(--yellow) }
.hero-media img { width: 100%; height: 100%; object-fit: cover }
.hero-fade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 11, 22, .55) 0%, rgba(13, 11, 22, .25) 40%, rgba(13, 11, 22, .85) 85%, var(--bg) 100%) }
.hero-content { position: relative; z-index: 1; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 120px 20px 80px; text-align: center }
.hero-content a { pointer-events: auto }
.hero-logo { width: min(86vw, 640px); height: auto; filter: drop-shadow(6px 6px 0 var(--ink-edge)); animation: up .8s var(--ease) both, float 6s ease-in-out .8s infinite }
.hero-tag { margin: 0; font-family: var(--font-display); font-size: clamp(15px, 2vw, 20px); color: var(--text); text-shadow: 2px 2px 0 var(--ink-edge); animation: up .8s var(--ease) .15s both }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: up .8s var(--ease) .3s both; scroll-margin-top: 50vh }
.hero-scroll { position: absolute; z-index: 1; bottom: 28px; left: 50%; margin-left: -23px; width: 46px; height: 46px; display: grid; place-items: center; background: var(--surface); color: var(--text); border: var(--border); box-shadow: var(--shadow); animation: bob 1.8s ease-in-out infinite; transition: background .2s }
.hero-scroll:hover { background: var(--orange); color: var(--text-on-accent) }

/* about */
.about { padding: clamp(72px, 10vw, 140px) clamp(16px, 4vw, 48px); scroll-margin-top: 40px }
.about-inner { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 6vw, 80px); align-items: center }
.about-text { display: flex; flex-direction: column; gap: 18px }
.eyebrow { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--yellow); text-transform: uppercase; letter-spacing: .12em }
.about h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; text-shadow: 4px 4px 0 var(--ink-edge) }
.about p { margin: 0; font-size: var(--fs-2xl); line-height: 1.5; color: var(--text-2); max-width: 520px; text-wrap: pretty }
.about-actions { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px }
.about-media { aspect-ratio: 4 / 3; border: var(--border-thick); box-shadow: var(--shadow-lg); overflow: hidden; background: var(--surface); transform: rotate(1.5deg) }
.about-media { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, var(--surface-active), var(--surface) 70%) }
.about-media img { width: 78%; height: auto; filter: drop-shadow(5px 5px 0 var(--ink-edge)) }
.about-media img.shot { width: 100%; height: 100%; object-fit: cover; filter: none }
.modes { display: flex; gap: 8px; flex-wrap: wrap }
.modes span { padding: 6px 10px; font-family: var(--font-display); font-size: var(--fs-xs); background: var(--surface); border: var(--border); box-shadow: var(--shadow-sm) }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in { opacity: 1; transform: none }
.about-media.reveal { transition-delay: .12s }

/* footer */
.footer { border-top: var(--border-thick); background: var(--bg-sidebar) }
.footer-inner { max-width: 1120px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px); display: flex; align-items: center; gap: 24px; flex-wrap: wrap }
.footer-logo { height: 34px; width: auto }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap }
.footer-links a { font-size: var(--fs-md); color: var(--text-3); transition: color .15s }
.footer-links a:hover { color: var(--text) }
.footer-copy { margin-left: auto; font-size: var(--fs-sm); color: var(--text-4) }

@media (max-width: 640px) {
  .nav-links a:not(:first-child):not(:nth-child(2)) { display: none }
  .nav-cta { display: none }
  .footer-copy { margin-left: 0 }
}