:root { --color-bg: #000000; --color-text: #e0e0e0; --color-silver: #c0c0c0; --color-deep-purple: #230230; --color-deep-purple-light: #3e0754; --color-accent: #e5b0ff; --font-main: ui-sans-serif, system-ui, -apple-system, sans-serif; --spacing-default: max(1.5rem, 4vw); --radius-squircle: 16px; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-main); font-stretch: condensed; background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; } h1, h2, h3, h4, .brand-name, .footer-logo { font-weight: 800; text-transform: uppercase; margin: 0; color: #ffffff; } a { color: var(--color-silver); text-decoration: none; transition: color 0.3s ease; } a:hover, a:focus { color: var(--color-accent); } .site-header { position: sticky; top: 0; z-index: 9999; background-color: var(--color-bg); border-bottom: 2px solid var(--color-deep-purple); } .header-container { display: flex; align-items: center; position: relative; padding: 1rem var(--spacing-default); } .burger-menu { order: 1; background: none; border: none; color: var(--color-silver); cursor: pointer; padding: 0.5rem; display: flex; align-items: center; justify-content: center; transition: color 0.2s; border-radius: var(--radius-squircle); } .burger-menu:hover { color: var(--color-accent); background-color: var(--color-deep-purple); } .burger-menu svg { width: 28px; height: 28px; } .main-nav { display: none; position: absolute; top: 100%; left: 0; background-color: var(--color-deep-purple); min-width: 250px; border-bottom-right-radius: var(--radius-squircle); border-right: 2px solid var(--color-deep-purple-light); border-bottom: 2px solid var(--color-deep-purple-light); padding: 1.5rem; box-shadow: 4px 4px 0px rgba(0,0,0,0.5); } .main-nav.is-open { display: block; } .nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.2rem; } .nav-list a { font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; display: block; } .brand-logo { order: 3; margin-left: auto; display: flex; align-items: center; gap: 0.75rem; color: #ffffff; font-size: 1.5rem; } .brand-logo svg { width: 32px; height: 32px; color: var(--color-accent); } .site-footer { background-color: var(--color-deep-purple); border-top: 4px solid var(--color-deep-purple-light); padding: var(--spacing-default); margin-top: 4rem; } .footer-container { display: grid; grid-template-columns: 1fr; gap: 3rem; max-width: 1200px; margin: 0 auto; } @media (min-width: 768px) { .footer-container { grid-template-columns: 1fr 2fr 1fr; } .footer-links { display: flex; justify-content: space-around; gap: 2rem; } } .footer-brand .tagline { margin-top: 0.5rem; font-size: 0.95rem; color: var(--color-silver); font-weight: 600; } .site-footer h4 { margin-bottom: 1.25rem; font-size: 1.1rem; border-bottom: 2px solid var(--color-deep-purple-light); padding-bottom: 0.5rem; display: inline-block; } .footer-nav-list, .footer-legal-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer-nav-list a, .footer-legal-list a, .contact-link { font-weight: 600; } .footer-contact p { margin: 0 0 1rem; } .contact-link:hover { text-decoration: underline; text-underline-offset: 4px; decoration-color: var(--color-accent); }
/* 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;}