:root { --bg-graphite: #1a1a1a; --bg-black: #050505; --bg-deepgrey: #121212; --accent-blue: #00e5ff; --accent-orange: #ff9100; --text-main: #f0f0f0; --text-muted: #aaaaaa; --radius: 4px; --spacing: 10px; --font-base: system-ui, -apple-system, sans-serif; --font-heading: 'Oswald', 'Arial Narrow', sans-serif; --font-serif: 'Playfair Display', Georgia, serif; } body { margin: 0; font-family: var(--font-base); background-color: var(--bg-black); color: var(--text-main); } h1, h2, h3, .brand-name { font-family: var(--font-heading); text-transform: uppercase; font-weight: 700; margin: 0 0 calc(var(--spacing) * 2) 0; } a { color: var(--text-main); text-decoration: none; transition: color 0.3s ease; } .site-header { position: absolute; top: 0; left: 0; width: 100%; z-index: 9999; background: transparent; transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; padding: calc(var(--spacing) * 3) 0; } .site-header.scrolled { position: fixed; background: rgba(18, 18, 18, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 4px 20px rgba(0,0,0,0.5); padding: calc(var(--spacing) * 1.5) 0; } .header-inner { max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--spacing) * 2); display: flex; align-items: center; justify-content: space-between; } .left-group { display: flex; align-items: center; gap: calc(var(--spacing) * 2); } .burger-btn { display: none; background: none; border: none; color: var(--text-main); cursor: pointer; padding: var(--spacing); border-radius: var(--radius); transition: color 0.3s ease; } .burger-btn:hover { color: var(--accent-blue); } .burger-btn svg { width: 28px; height: 28px; } .brand { display: flex; align-items: center; gap: var(--spacing); font-family: var(--font-serif); font-size: 1.5rem; } .brand svg { width: 40px; height: 40px; color: var(--accent-blue); } .brand-name { margin: 0; font-family: var(--font-serif); text-transform: none; font-weight: 600; } .desktop-nav { display: flex; gap: calc(var(--spacing) * 3); } .desktop-nav a { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 500; } .desktop-nav a:hover { color: var(--accent-blue); } .desktop-nav a.active { color: var(--accent-orange); } .mobile-nav-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(10, 10, 10, 0.95); z-index: 10000; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .mobile-nav-overlay.open { opacity: 1; visibility: visible; } .close-menu-btn { position: absolute; top: calc(var(--spacing) * 3); right: calc(var(--spacing) * 3); background: none; border: none; color: var(--text-main); cursor: pointer; padding: var(--spacing); border-radius: var(--radius); } .close-menu-btn:hover { color: var(--accent-orange); } .close-menu-btn svg { width: 32px; height: 32px; } .mobile-nav { display: flex; flex-direction: column; gap: calc(var(--spacing) * 3); text-align: center; } .mobile-nav a { font-family: var(--font-serif); font-size: 2rem; } .mobile-nav a:hover { color: var(--accent-blue); } .mobile-nav a.active { color: var(--accent-orange); } .site-footer { background: linear-gradient(135deg, var(--bg-graphite), var(--bg-deepgrey)); padding: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 2); border-top: 1px solid rgba(255,255,255,0.05); box-shadow: 0 -10px 30px rgba(0,0,0,0.5); margin-top: calc(var(--spacing) * 6); } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 calc(var(--spacing) * 2); display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--spacing) * 4); margin-bottom: calc(var(--spacing) * 4); } .footer-section h2, .footer-section h3 { color: var(--accent-blue); margin-bottom: calc(var(--spacing) * 2); } .tagline { font-family: var(--font-serif); color: var(--text-muted); font-size: 1.1rem; } .footer-contact ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: calc(var(--spacing) * 1.5); } .footer-contact li a { display: flex; align-items: flex-start; gap: var(--spacing); color: var(--text-muted); line-height: 1.5; } .footer-contact li a:hover { color: var(--accent-orange); } .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent-blue); margin-top: 2px; } .footer-legal nav { display: flex; flex-direction: column; gap: var(--spacing); } .footer-legal nav a { color: var(--text-muted); } .footer-legal nav a:hover { color: var(--accent-blue); } .footer-bottom { text-align: center; padding-top: calc(var(--spacing) * 2); border-top: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); font-size: 0.9rem; } @media (max-width: 768px) { .burger-btn { display: block; } .desktop-nav { display: none; } }
/* footer extras */
.footer__extras{margin-top:16px;}
.footer__extrasInner{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;justify-content:space-between;}
.footer__social{display:flex;gap:10px;align-items:center;}
.footer-social{display:inline-flex;gap:8px;align-items:center;text-decoration:none;}
.footer-social__icon{display:block;}
.footer__poemWrap{max-width:520px;}
.footer-poem{opacity:0.9;font-size:0.95em;line-height:1.35;}
/* --- injected by logo step --- */
.brand{display:inline-flex;align-items:center;gap:10px}
.brand-logo{width:28px;height:28px;display:inline-block;flex:0 0 auto}
.brand-logo *{vector-effect:non-scaling-stroke}
/* --- /injected by logo step --- */


body.menu-open { overflow: hidden; }
.site-header { border-bottom: 1px solid transparent; }
.site-header.scrolled { border-bottom-color: rgba(255,255,255,0.08); }
.desktop-nav a { position: relative; padding-bottom: 4px; }
.desktop-nav a.active::after,
.mobile-nav a.active::after { content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--accent-blue), var(--accent-orange)); margin-top: 6px; }
.site-footer { margin-top: 0; }
.footer-contact a, .footer-legal a { word-break: break-word; }
.legal-shell, .thanks-shell { width: min(100%, 1120px); margin: 0 auto; padding: 9rem 1.5rem 4rem; }
.legal-intro { max-width: 860px; margin-bottom: 2rem; }
.legal-kicker, .thanks-kicker { color: var(--accent-blue); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.82rem; font-weight: 700; margin-bottom: 1rem; display: block; }
.legal-intro h1, .thanks-card h1 { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; color: #ffffff; margin-bottom: 1rem; }
.legal-intro p { color: #d4d4d8; max-width: 720px; line-height: 1.8; font-size: 1.05rem; }
.legal-card, .thanks-card { background: linear-gradient(180deg, rgba(18,18,18,0.96), rgba(8,8,8,0.98)); border: 1px solid rgba(255,255,255,0.08); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,0.45); padding: clamp(1.5rem, 3vw, 3rem); }
.legal-card section + section { margin-top: 2rem; }
.legal-card h2 { color: #ffffff; font-size: clamp(1.2rem, 2vw, 1.6rem); margin-bottom: 0.75rem; }
.legal-card p, .legal-card li { color: #d4d4d8; line-height: 1.85; }
.legal-list { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.75rem; }
.legal-card a { color: var(--accent-blue); }
.legal-card a:hover { color: #9be8ff; }
.legal-updated { color: #a1a1aa; margin-bottom: 1.5rem; }
.thanks-shell { min-height: calc(100vh - 220px); display: flex; align-items: center; justify-content: center; }
.thanks-card { max-width: 760px; text-align: center; }
.thanks-card p { color: #d4d4d8; line-height: 1.85; max-width: 56ch; margin: 0 auto 1.5rem; }
.thanks-actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-top: 2rem; }
.thanks-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 0.95rem 1.4rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); color: #ffffff; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,0.03); }
.thanks-btn:hover { border-color: var(--accent-blue); color: #ffffff; }
.thanks-btn-primary { background: linear-gradient(90deg, var(--accent-blue), #2d6bff); color: #031016; border-color: transparent; }
.thanks-btn-primary:hover { color: #031016; filter: brightness(1.05); }
#contact a.text-zinc-400, #contact p.text-zinc-400, #contact label.text-zinc-400 { color: #d4d4d8 !important; }
#contact .text-zinc-400:hover { color: #67e8f9 !important; }
#contact .bg-\[\#121215\] input, #contact .bg-\[\#121215\] textarea { color: #f4f4f5; }
#contact-cta h2, #contact-cta p, #contact-cta a, #contact-cta .mt-12 { text-shadow: 0 8px 20px rgba(0,0,0,0.32); }
@media (max-width: 768px) {
  .legal-shell, .thanks-shell { padding-top: 7.5rem; padding-bottom: 3rem; }
  .thanks-actions { flex-direction: column; }
  .thanks-btn { width: 100%; min-width: 0; }
}