/* Fade District — asphalt black, signal lime, chalk white. Space Grotesk + Space Mono. */
:root {
  --c-primary: #c8f031; --c-primary-dark: #b2d91f; --c-accent: #c8f031;
  --c-ink: #f2f2ee; --c-muted: #a7a8a2; --c-bg: #101010; --c-surface: #1a1a1a;
  --c-dark: #0a0a0a; --c-on-dark: #f2f2ee; --c-on-primary: #101010; --c-border: #2b2b2b;
  --f-head: "Space Grotesk", system-ui, sans-serif; --f-body: "Space Grotesk", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace; --fw-head: 700; --radius: 0; --radius-sm: 0;
}
a { color: var(--c-primary); }
.btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; font-family: var(--f-mono); font-size: .9rem; }
.btn:hover { transform: none; }
.btn--primary { box-shadow: 4px 4px 0 #f2f2ee; }
.btn--primary:hover { box-shadow: 2px 2px 0 #f2f2ee; transform: translate(2px,2px); }
.fd-btn-line { border: 2px solid #f2f2ee; color: #f2f2ee; background: transparent; }
.fd-btn-line:hover { background: #f2f2ee; color: #101010; }
.site-header { background: rgba(16,16,16,.94); }
.brand { font-family: var(--f-mono); letter-spacing: .04em; color: #f2f2ee; }
.brand b { color: var(--c-primary); }
.nav-links a { font-family: var(--f-mono); text-transform: uppercase; font-size: .82rem; letter-spacing: .08em; color: #f2f2ee; }
.nav-links a:hover, .nav-links a[aria-current] { background: none; color: var(--c-primary); }
.nav-toggle { background: #101010; }
.demo-banner { background: var(--c-primary); color: #101010; font-family: var(--f-mono); }

.fd-hero { border-bottom: 2px solid var(--c-primary); background: radial-gradient(circle at 80% 10%, #1e2410 0, transparent 50%), #101010; }
.fd-hero-grid { display: grid; gap: 32px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(32px, 6vw, 64px); align-items: center; }
@media (min-width: 900px) { .fd-hero-grid { grid-template-columns: 1.15fr .85fr; gap: 56px; } }
.fd-tag { font-family: var(--f-mono); font-size: .82rem; color: var(--c-muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fd-tag span { background: var(--c-primary); color: #101010; padding: 2px 8px; font-weight: 700; text-transform: uppercase; }
.fd-hero h1 { font-size: clamp(2.6rem, 8vw, 5.4rem); line-height: .95; letter-spacing: -.03em; margin: 18px 0 22px; text-transform: uppercase; }
.fd-hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 2px var(--c-primary); }
.fd-lede { font-size: 1.15rem; color: #cfd0ca; max-width: 34em; }
.fd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 20px; }
.fd-walkin { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .1em; display: flex; align-items: center; gap: 10px; color: var(--c-primary); }
.fd-dot { width: 10px; height: 10px; background: var(--c-primary); border-radius: 50%; box-shadow: 0 0 0 4px rgba(200,240,49,.2); }
.fd-hero-photo { margin: 0; position: relative; }
.fd-hero-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(.35) contrast(1.05); border: 2px solid #f2f2ee; box-shadow: 14px 14px 0 var(--c-primary); }
.fd-hero-photo figcaption { position: absolute; left: 10px; bottom: 10px; font-family: var(--f-mono); font-size: .7rem; background: #101010; color: var(--c-muted); padding: 3px 8px; }
@media (max-width: 899px) { .fd-hero-photo img { aspect-ratio: 4/3; box-shadow: 8px 8px 0 var(--c-primary); } }
/* Static price markers under the hero (district-signage boards, no motion) */
.fd-markers { list-style: none; margin: 0; padding: 0 0 clamp(28px, 5vw, 48px); display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; background: transparent; }
@media (min-width: 760px) { .fd-markers { grid-template-columns: repeat(4, 1fr); } }
.fd-markers li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; background: #181818; border-top: 3px solid var(--c-primary); }
.fd-markers small { font-family: var(--f-mono); font-weight: 700; width: 28px; height: 28px; display: grid; place-items: center; background: var(--c-primary); color: #101010; font-size: .85rem; }
.fd-markers span { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: #f2f2ee; }
.fd-markers b { font-size: 1.25rem; color: var(--c-primary); }

.fd-head { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: baseline; margin-bottom: 36px; border-bottom: 1px solid var(--c-border); padding-bottom: 14px; }
.fd-head h2 { margin: 0; text-transform: uppercase; letter-spacing: -.02em; }
.fd-head p { grid-column: 1 / -1; margin: 8px 0 0; color: var(--c-muted); font-family: var(--f-mono); font-size: .85rem; }
.fd-num { font-family: var(--f-mono); color: var(--c-primary); font-size: 1rem; }
.fd-menu, .fd-shop, .fd-work, .fd-visit, .fd-contact { padding: clamp(56px, 8vw, 96px) 0; }
.fd-board { display: grid; gap: 28px; }
@media (min-width: 900px) { .fd-board { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.fd-col h3 { font-family: var(--f-mono); text-transform: uppercase; font-size: .9rem; letter-spacing: .12em; color: var(--c-primary); }
.fd-col--combo { background: var(--c-surface); padding: 24px; border: 1px solid var(--c-border); }
.fd-list { list-style: none; padding: 0; margin: 0 0 20px; }
.fd-list li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; }
.fd-list i { flex: 1; border-bottom: 1px dotted #555; transform: translateY(-4px); }
.fd-list b { font-family: var(--f-mono); color: #f2f2ee; }

.fd-shop { background: #f2f2ee; color: #101010; }
.fd-shop .fd-head { border-color: #d6d6d0; }
.fd-shop .fd-num { color: #5d7a00; }
.fd-shop-grid { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .fd-shop-grid { grid-template-columns: .9fr 1.1fr; gap: 64px; } }
.fd-shop-photo { position: relative; }
.fd-shop-photo img { width: 100%; aspect-ratio: 9/7; object-fit: cover; }
.fd-shop-photo .photo-note { position: absolute; left: 10px; bottom: 10px; margin: 0; }
.fd-big { font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.3; font-weight: 500; }
.fd-perks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fd-perks li { font-family: var(--f-mono); font-size: .82rem; border: 1.5px solid #101010; padding: 6px 12px; }
.fd-perks li:first-child { background: #101010; color: var(--c-primary); }

.fd-gallery { gap: 4px; }
.fd-gallery img { filter: grayscale(1); transition: filter .3s, transform .4s; }
.fd-gallery button:hover img { filter: none; }
.fd-gallery button { border-radius: 0; }

.fd-visit { border-top: 1px solid var(--c-border); }
.fd-visit-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .fd-visit-grid { grid-template-columns: .8fr 1.2fr; align-items: stretch; } }
.fd-addr { font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.fd-link { color: #f2f2ee; text-decoration-color: var(--c-primary); text-underline-offset: 4px; font-family: var(--f-mono); }
.map-embed { border-radius: 0; border: 2px solid var(--c-primary); box-shadow: none; }
.map-embed iframe { height: 100%; min-height: 360px; filter: grayscale(.5); }

.fd-contact { background: var(--c-primary); color: #101010; }
.fd-contact .fd-head { border-color: rgba(0,0,0,.25); }
.fd-contact .fd-num { color: #101010; }
.fd-contact a { color: #101010; font-weight: 700; }
.fd-contact-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .fd-contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.fd-form { background: #101010; color: #f2f2ee; padding: clamp(22px, 4vw, 36px); }
.fd-form .field input, .fd-form .field textarea { background: #1a1a1a; border-color: #3a3a3a; color: #f2f2ee; }
.fd-form .btn--primary { box-shadow: 4px 4px 0 var(--c-primary); border: 2px solid var(--c-primary); }
.fd-form .form-success { color: #f2f2ee; }
.fd-form .form-success svg { color: var(--c-primary); }

.fd-footer { background: #0a0a0a; color: var(--c-muted); font-family: var(--f-mono); font-size: .8rem; padding: 26px 0; }
.fd-footer .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.fd-footer b { color: var(--c-primary); }
.fd-footer a { color: #f2f2ee; }
.call-bar { background: #101010; border-color: var(--c-border); }