@font-face {
    font-family: 'orderbold';
    src: url('order_bold-webfont.woff2') format('woff2'),
         url('order_bold-webfont.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'orderlight';
    src: url('order_light-webfont.woff2') format('woff2'),
         url('order_light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'orderregular';
    src: url('order_reg-webfont.woff2') format('woff2'),
         url('order_reg-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root{
  --bg:#0a0a0a; /* near black */
  --fg:#eaeaea; /* soft white */
  --muted:#9a9a9a;
  --accent:#d0ffd6; /* pale retro-futurist mint */
  --grid:rgba(255,255,255,.06);
  --maxw:1120px;
  --mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: "orderregular", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --bold: "orderbold", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.6;font-size:20px}
a{color:var(--fg);text-decoration:none}
a:hover{color:var(--accent)}

/* Top bar */
.top{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;justify-content:center;background:rgba(10,10,10,.7);backdrop-filter:blur(6px);border-bottom:1px solid #151515;z-index:50}
.top-inner{width:100%;max-width:var(--maxw);display:flex;align-items:center;gap:16px;padding:0 16px}
.brand{font-family:var(--mono);font-weight:700;letter-spacing:.2em}
.brand a{display:inline-block;padding:8px 0}
nav{margin-left:auto}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
nav a{font-family:var(--mono);font-size:15px;letter-spacing:.15em;text-transform:uppercase}
.cta{margin-left:12px;border:1px solid var(--fg);padding:8px 12px;border-radius:999px}

/* Hero */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;padding-top:64px;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) brightness(.85)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(10,10,10,.85) 0%, rgba(10,10,10,.35) 40%, rgba(10,10,10,.85) 100%), repeating-linear-gradient(180deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);} /* CRT scanlines */
.hero-inner{position:relative;z-index:1;text-align:center;padding:24px}
.kicker{font-family:var(--mono);color:var(--accent);letter-spacing:.3em;text-transform:uppercase;font-size:14px}
h1{margin:.4em 0 .2em;font-size:clamp(44px,8vw,92px);line-height:1.05;letter-spacing:.02em}
.sub{max-width:800px;margin:0 auto;color:var(--muted)}

.hero-controls{display:flex;justify-content:center;gap:12px;margin-top:20px}
.btn{border:1px solid var(--fg);padding:10px 16px;border-radius:999px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:14px}
.btn:hover{border-color:var(--accent);color:var(--accent)}

/* Sections */
section{padding:72px 16px;border-top:1px solid #151515;background-image:linear-gradient(0deg, transparent, transparent), linear-gradient(90deg, var(--grid) 1px, transparent 1px);background-size:100% 100%, 40px 40px;background-position:0 0, 0 -32px}
.wrap{max-width:var(--maxw);margin:0 auto}
h2{font-size:clamp(32px,5vw,50px);margin:0 0 .4em}
.lead{color:var(--muted);max-width:900px}

/* Grid cards */
.grid{display:grid;gap:16px}
@media(min-width:720px){.grid.cols-2{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid #1d1d1d;border-radius:16px;padding:20px;background:linear-gradient(180deg,#0b0b0b,#0a0a0a)}
.card h3{margin:0 0 .25em;font-family:var(--mono);text-transform:uppercase;letter-spacing:.15em;font-size:14px;color:var(--accent)}
.mono{font-family:var(--mono)}

/* Gallery */
.gallery{display:grid;gap:8px;grid-template-columns:repeat(2,1fr)}
@media(min-width:880px){.gallery{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;position:relative;border-radius:12px;overflow:hidden;border:1px solid #1d1d1d;cursor:pointer;transition:transform .2s ease}
.gallery figure:hover{transform:scale(1.02)}
.gallery img{display:block;width:100%;height:100%;object-fit:cover}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:1000;padding:20px}
.modal.active{display:flex}
.modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center}
.modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:var(--fg);font-size:32px;cursor:pointer;padding:8px;line-height:1}
.modal-close:hover{color:var(--accent)}
.modal img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:8px}
.modal-caption{margin-top:16px;color:var(--fg);text-align:center;font-family:var(--mono);font-size:14px;letter-spacing:.1em}

/* Footer */
footer{padding:48px 16px;border-top:1px solid #151515;color:var(--muted)}

/* Accessibility helpers */
.visually-hidden{position:absolute;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}