/* ========================================================================== DESIGN TOKENS — edit these to restyle the whole site ========================================================================== */ :root { --bg: #000000; --fg: #ffffff; --fg-dim: #ffffff; --line: #6f6f67; --font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --max-width: 1100px; --gutter: 32px; --header-height: 84px; --tracking: 0.10em; --transition: 0.25s ease; --rule-size: 10px; --rule-gutter: 20px; } @media (max-width: 640px) { :root { --gutter: 20px; --header-height: 64px; } } /* ========================================================================== SECTION BACKGROUND IMAGES Add class="has-section-bg bg-" to on any page that should show one. The image sits at the top of the page, centred horizontally, spanning the full width — the fixed header paints over it automatically, so it always reads as sitting beneath the navigation. Swap the PNG files (bg-artwork.png, bg-biography.png, bg-essay.png, bg-product.png) for the real artwork whenever it's ready. ========================================================================== */ .has-section-bg { position: relative; isolation: isolate; } /* A fixed-position pseudo-element instead of background-attachment:fixed — iOS Safari does not honour background-attachment:fixed and lets the image scroll with the page anyway. A position:fixed element is honoured correctly there, so this keeps the image pinned in place on all devices, iOS included. */ .has-section-bg::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-position: top center; background-size: 100% auto; } .bg-index::before { background-image: url('backgrounds/bg-index.jpg'); } .bg-artwork::before { background-image: url('backgrounds/bg-artwork.jpg'); } .bg-biography::before { background-image: url('backgrounds/bg-biography.jpg'); } .bg-essay::before { background-image: url('backgrounds/bg-essay.jpg'); } .bg-product::before { background-image: url('backgrounds/bg-product.jpg'); } .bg-credits::before { background-image: url('backgrounds/bg-credits.jpg'); } /* ========================================================================== RESET ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); } body { font-family: var(--font); -webkit-font-smoothing: antialiased; line-height: 1.5; text-transform: lowercase; letter-spacing: var(--tracking); } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } img { max-width: 100%; display: block; } button { font-family: inherit; } ::selection { background: var(--fg); color: var(--bg); } /* ========================================================================== LAYOUT ========================================================================== */ .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); } main { padding-top: var(--header-height); min-height: 100vh; } /* ========================================================================== HEADER / NAV ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: var(--bg); z-index: 100; border-bottom: 2px solid var(--line); } .site-title { font-size: 14px; font-weight: 700; letter-spacing: var(--tracking); text-transform: lowercase; white-space: nowrap; } .caps { text-transform: uppercase; } /* Desktop inline nav */ .nav-inline { display: flex; gap: 28px; } .nav-inline a { font-size: 12px; font-weight: 500; letter-spacing: var(--tracking); text-transform: lowercase; position: relative; padding-bottom: 4px; } .nav-inline a::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--fg); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .nav-inline a:hover::after, .nav-inline a[aria-current="page"]::after { transform: scaleX(1); } /* Hamburger button */ .hamburger { display: none; position: relative; width: 28px; height: 20px; background: none; border: none; cursor: pointer; z-index: 200; padding: 0; } .hamburger span { position: absolute; left: 0; right: 0; height: 1px; background: var(--fg); transition: transform var(--transition), opacity var(--transition), top var(--transition); } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 9px; } .hamburger span:nth-child(3) { top: 18px; } .nav-open .hamburger span:nth-child(1) { top: 9px; transform: rotate(45deg); } .nav-open .hamburger span:nth-child(2) { opacity: 0; } .nav-open .hamburger span:nth-child(3) { top: 9px; transform: rotate(-45deg); } /* Full-screen overlay nav (mobile) */ .nav-overlay { position: fixed; inset: 0; background: var(--bg); z-index: 150; display: flex; align-items: center; justify-content: flex-start; padding-left: var(--gutter); opacity: 0; pointer-events: none; transition: opacity var(--transition); } .nav-open .nav-overlay { opacity: 1; pointer-events: auto; } .nav-overlay ul { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; border-left: var(--rule-size) solid var(--fg); padding-left: var(--rule-gutter); } .nav-overlay a { display: block; font-size: 28px; font-weight: 700; letter-spacing: var(--tracking); text-transform: lowercase; } .nav-overlay a[aria-current="page"] { color: var(--fg-dim); } @media (max-width: 768px) { .nav-inline { display: none; } .hamburger { display: block; } } /* Lock scroll when menu open */ .nav-open { overflow: hidden; } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { border-top: 2px solid var(--line); padding: 24px var(--gutter) 40px; background: #000; } .site-footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 0; } .site-footer p { margin: 0; font-size: 11px; letter-spacing: var(--tracking); text-transform: lowercase; color: var(--fg-dim); } .footer-logo { height: 14px; width: auto; display: block; } /* ========================================================================== INDEX PAGE — typographic table of contents ========================================================================== */ .index-hero { width: 100%; aspect-ratio: 3 / 2; overflow: hidden; } .index-hero picture, .index-hero a { display: block; width: 100%; height: 100%; } .index-hero img { width: 100%; height: 100%; /* contain, not cover: this image is a transparent logotype overlay, not a photo, so it must never be cropped — it should always scale to fit fully inside its box, whatever the box's ratio. */ object-fit: contain; } /* This breakpoint must match the