/* ============================================ BOUTIQUE ART EXPERIENCES — Design System Fonts are loaded via in each page's , not @import here — @import is slower and less reliable for web fonts. ============================================ */ :root { /* Color */ --carbon: #000000; --soft-black: #141515; --bone: #E7E4DE; --ash: #A5A39E; --hairline: #555653; /* Type */ --font-display: 'Prata', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; /* Spacing scale (8px system) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 16px; --sp-4: 24px; --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px; --sp-10: 192px; /* Layout */ --content-max: 1312px; --margin-desktop: 64px; --margin-mobile: 24px; } * { box-sizing: border-box; margin: 0; padding: 0; } html { background: var(--carbon); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { background: var(--carbon); color: var(--bone); font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.55; min-height: 100vh; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; background: none; border: none; color: inherit; cursor: pointer; } ::selection { background: var(--bone); color: var(--carbon); } :focus-visible { outline: 1px solid var(--bone); outline-offset: 4px; } /* ============================================ Typography styles ============================================ */ .display { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 400; font-size: 37px; line-height: 1.02; letter-spacing: 0; } @media (min-width: 900px) { .display { font-size: 46px; line-height: 1.02; } } .xp-title { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: 1.2; } @media (min-width: 900px) { .xp-title { font-size: 18px; } } .artist-name { font-family: var(--font-display); font-optical-sizing: auto; font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.2; } @media (min-width: 900px) { .artist-name { font-size: 19px; } } .body-text { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--bone); } @media (min-width: 900px) { .body-text { font-size: 15px; line-height: 1.55; } } .label { font-family: var(--font-body); font-weight: 500; font-size: 10px; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); } .nav-text { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .clock-text { font-family: var(--font-body); font-weight: 400; font-size: 9px; letter-spacing: 0.15em; color: var(--ash); } @media (max-width: 899px) { .clock-text { font-size: 8.5px; } } /* ============================================ Layout containers ============================================ */ .frame { width: 100%; padding-left: var(--margin-mobile); padding-right: var(--margin-mobile); } @media (min-width: 900px) { .frame { padding-left: var(--margin-desktop); padding-right: var(--margin-desktop); } } .content { max-width: var(--content-max); margin: 0 auto; } /* ============================================ Header / Navigation ============================================ */ .site-header { position: relative; z-index: 40; display: flex; flex-wrap: wrap; row-gap: var(--sp-3); align-items: flex-start; justify-content: space-between; padding-top: var(--sp-5); padding-bottom: var(--sp-5); min-height: 110px; } .wordmark { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; line-height: 1.5; text-transform: uppercase; color: var(--bone); } .wordmark a { display: block; } .primary-nav { display: none; } @media (min-width: 900px) { .primary-nav { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; } .primary-nav a { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; color: var(--bone); padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color 0.2s ease, color 0.2s ease; } .primary-nav a:hover, .primary-nav a[aria-current="page"] { border-bottom-color: var(--bone); } } .header-clock { display: none; } @media (min-width: 900px) { .header-clock { display: block; white-space: nowrap; } } .menu-toggle { display: block; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); } @media (min-width: 900px) { .menu-toggle { display: none; } } /* Mobile menu overlay */ .mobile-menu { position: fixed; inset: 0; background: var(--carbon); z-index: 50; display: flex; flex-direction: column; justify-content: center; padding: var(--margin-mobile); transform: translateY(-100%); transition: transform 0.35s ease; } .mobile-menu.is-open { transform: translateY(0); } .mobile-menu-close { position: absolute; top: var(--sp-5); right: var(--margin-mobile); font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; } .mobile-menu-links { display: flex; flex-direction: column; gap: var(--sp-5); } .mobile-menu-links a { font-family: var(--font-body); font-weight: 500; font-size: 22px; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4; color: var(--bone); } /* ============================================ Fixed bottom bar ============================================ */ .status-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--margin-mobile); pointer-events: none; background: linear-gradient(to top, rgba(12,13,13,0.9), rgba(12,13,13,0)); } @media (min-width: 900px) { .status-bar { padding: var(--sp-4) var(--margin-desktop); } } .status-bar .ig-link { pointer-events: auto; font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.2em; color: var(--bone); } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 16px 28px; font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; transition: background 0.2s ease, color 0.2s ease; } .btn-primary { background: var(--bone); color: var(--carbon); } .btn-primary:hover { background: var(--ash); } .btn-outline { border: 1px solid var(--hairline); color: var(--bone); } .btn-outline:hover { border-color: var(--bone); } .text-link { font-family: var(--font-body); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; display: inline-flex; gap: var(--sp-2); align-items: center; transition: border-color 0.2s ease; } .text-link:hover { border-color: var(--bone); } /* ============================================ Divider ============================================ */ .hr-short { width: 32px; height: 1px; background: var(--bone); border: none; } .hr-full { width: 100%; height: 1px; background: var(--hairline); border: none; } /* ============================================ Texture — generative, placeholder for licensed photography ============================================ */ .texture { position: absolute; inset: 0; opacity: 0.28; filter: contrast(140%) brightness(0.9); mix-blend-mode: screen; pointer-events: none; } /* ============================================ Utility ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .visually-hide-desktop { display: block; } @media (min-width: 900px) { .visually-hide-desktop { display: none; } } .visually-hide-mobile { display: none; } @media (min-width: 900px) { .visually-hide-mobile { display: block; } } /* Responsive two-column layouts (event header, album detail) */ .two-col { display: grid; grid-template-columns: 1fr; gap: var(--sp-7); align-items: start; } @media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 560px) 1fr; gap: var(--sp-8); } .two-col.reverse { grid-template-columns: minmax(0, 620px) minmax(0, 380px); } } /* Texture — barely perceptible drift, never fully still, never distracting */ .drift-slow { animation: drift 18s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(10px) scale(1.015); } } /* Hero's inner content box — mobile gets a much shorter minimum height than desktop, since 50vh of a phone screen is proportionally far more empty space than 50vh of a desktop viewport. */ .hero-inner { min-height: 18vh; } @media (min-width: 900px) { .hero-inner { min-height: 50vh; } }