/* =========================================================================== LANE AUDIO Digital brutalism: hard 1px rules, sharp corners, monochrome + one accent. No shadows, no gradients, no glows, no blur, no rounded corners. =========================================================================== */ /* --- tokens -------------------------------------------------------------- */ :root { --bg: #0a0a0a; --fg: #f4f4f2; --muted: #8c8c88; --line: #2c2c2c; --dot-off: #1c1c1c; --hero-ink: #5c5c59; /* peak colour of the tiled marks behind the hero wordmark; dots fade between --dot-off and this */ --accent: #ff4d1f; --gutter: clamp(16px, 3vw, 40px); --header-h: 56px; --font-display: 'Archivo', Helvetica, Arial, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; } /* --- reset --------------------------------------------------------------- */ * { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; } html { background: var(--bg); -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--fg); font-family: var(--font-display); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* Scroll lock for the open mobile menu. position:fixed rather than overflow:hidden, which mobile Safari ignores on . site.js keeps the scroll position in the `top` offset and restores it on close. */ body.is-locked { position: fixed; width: 100%; overflow: hidden; } img { display: block; max-width: 100%; } ul { list-style: none; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Available to screen readers, never drawn. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- shared type --------------------------------------------------------- */ .mono, .module-link, .nav-link, .brand-name, .menu-toggle, .tag, .btn, .foot-label, .foot-bottom, .release-artist, .release-meta, .release-links, .event-month, .event-where, .event-lineup, .callout-label, .product-badge, .strip-index, .hero-kicker, .page-label, .page-count, .empty-row, .nav-panel-label, .menu-sub-label, .menu-sub-link, .pillar-index, .contact-label, .work-meta, .store-note { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; } h1, h2, h3 { font-weight: 800; font-stretch: 115%; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.02em; } p a { text-decoration: underline; text-underline-offset: 3px; } p a:hover, p a:focus-visible { color: var(--accent); } /* --- buttons ------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.8rem 1.2rem; border: 1px solid var(--fg); color: var(--fg); background: transparent; text-decoration: none; white-space: nowrap; transition: background-color 0.1s linear, color 0.1s linear, border-color 0.1s linear; } .btn:hover, .btn:focus-visible { background: var(--fg); color: var(--bg); } .btn--solid { background: var(--fg); color: var(--bg); } .btn--solid:hover, .btn--solid:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--bg); } .btn--sm { padding: 0.5rem 0.8rem; } /* --- tags ---------------------------------------------------------------- */ .tag { display: inline-block; font-size: 0.65rem; padding: 0.2rem 0.45rem; border: 1px solid var(--line); color: var(--muted); } .tag--accent { border-color: var(--accent); color: var(--accent); } .tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } /* --- header -------------------------------------------------------------- */ #site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; height: var(--header-h); padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--fg); } .brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; } .brand-mark { height: 20px; width: auto; } .brand-name { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; } /* The list stretches to the full header height so the dropdown, positioned at top:100%, lands exactly on the header's bottom rule. */ .nav, .nav-list { align-self: stretch; height: 100%; } .nav-list { display: flex; align-items: stretch; gap: 1.75rem; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; height: 100%; text-decoration: none; color: var(--fg); } .nav-link:hover { color: var(--accent); } .nav-link[aria-current='page'] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .nav-caret { font-size: 0.6em; vertical-align: middle; } /* About dropdown */ .nav-panel { display: none; position: absolute; top: 100%; right: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--fg); } .nav-item--has-panel:hover .nav-panel, .nav-item--has-panel:focus-within .nav-panel { display: block; } .nav-panel-label { padding: 0.6rem 0.9rem; color: var(--muted); border-bottom: 1px solid var(--line); } .nav-panel-link { display: block; padding: 0.7rem 0.9rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border-bottom: 1px solid var(--line); } .nav-panel-link:last-child { border-bottom: 0; } .nav-panel-link:hover, .nav-panel-link:focus-visible { background: var(--fg); color: var(--bg); } .menu-toggle { display: none; } /* --- mobile menu --------------------------------------------------------- */ .mobile-menu { position: fixed; inset: var(--header-h) 0 0 0; z-index: 40; background: var(--bg); overflow-y: auto; } .mobile-menu[hidden] { display: none; } .menu-row { border-bottom: 1px solid var(--line); padding: 1rem var(--gutter); } .menu-link { display: block; font-weight: 800; font-stretch: 115%; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.02em; font-size: clamp(2.5rem, 12vw, 4rem); text-decoration: none; } .menu-link[aria-current='page'] { color: var(--accent); } .menu-sub { padding: 0.75rem 0 0.25rem 1.25rem; } .menu-sub-label { color: var(--muted); margin-bottom: 0.4rem; } .menu-sub-link { display: block; padding: 0.35rem 0; text-decoration: none; } .menu-sub-link:hover { color: var(--accent); } /* --- hero ---------------------------------------------------------------- */ /* Single column over a canvas of small dithered marks (js/hero.js). The hero's height follows its text. */ .hero { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; padding: var(--gutter); border-bottom: 1px solid var(--fg); overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; } .hero-intro, .hero-wordmark { position: relative; z-index: 1; } /* The kicker + tagline sit on a solid plate so they stay legible over the dot field. */ .hero-intro { align-self: flex-start; padding: 0.85rem 1rem; background: var(--bg); border: 1px solid var(--line); } .hero-kicker { color: var(--muted); } .hero-intro .hero-tagline { margin-top: 0.6rem; } .hero-wordmark { font-weight: 800; font-stretch: 125%; text-transform: uppercase; /* Two lines ("LANE" / "AUDIO") at every width. */ font-size: clamp(3.5rem, 12vw, 12rem); line-height: 0.85; letter-spacing: -0.03em; font-kerning: none; } /* The L's foot runs under the A's diagonal, so that pair looks tighter than the rest even unkerned; open it up a little. */ .wordmark-kern { letter-spacing: 0.03em; } .hero-tagline { margin-top: 1.5rem; max-width: 36ch; color: var(--muted); } /* --- ticker band --------------------------------------------------------- */ /* Full-width LED ticker between the site header and the hero; js/hero.js draws it. 9 rows of 5.5px dots plus the 1px rule (border-box). */ .ticker-band { position: relative; height: 51px; overflow: hidden; border-bottom: 1px solid var(--fg); } .ticker-band canvas { display: block; width: 100%; height: 100%; } /* --- strip --------------------------------------------------------------- */ .strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--fg); } .strip-cell { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.25rem var(--gutter); border-right: 1px solid var(--line); text-decoration: none; transition: background-color 0.1s linear, color 0.1s linear; } .strip-cell:last-child { border-right: 0; } .strip-cell:hover, .strip-cell:focus-visible { background: var(--fg); color: var(--bg); } .strip-index { color: var(--muted); } .strip-cell:hover .strip-index, .strip-cell:focus-visible .strip-index { color: var(--bg); } .strip-label { flex: 1; font-weight: 700; font-stretch: 110%; text-transform: uppercase; font-size: 1.1rem; letter-spacing: -0.01em; } /* --- modules ------------------------------------------------------------- */ .module { border-bottom: 1px solid var(--fg); } .module-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.5rem var(--gutter); border-bottom: 1px solid var(--line); } .module-head h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); } .module-link { color: var(--muted); text-decoration: none; white-space: nowrap; } .module-link:hover, .module-link:focus-visible { color: var(--accent); } .empty-row { padding: 2rem var(--gutter); color: var(--muted); } /* --- releases ------------------------------------------------------------ */ .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .release { display: flex; flex-direction: column; padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .rail .release:nth-child(4n) { border-right: 0; } .release-main { display: block; text-decoration: none; } .release-art { aspect-ratio: 1; border: 1px solid var(--line); margin-bottom: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .release-art img { width: 100%; height: 100%; object-fit: cover; } .release-art-fallback { font-weight: 800; font-stretch: 125%; font-size: 4rem; color: var(--line); text-transform: uppercase; } .release-main:hover .release-art { border-color: var(--fg); } .release-title { font-weight: 600; font-size: 1.05rem; line-height: 1.25; overflow-wrap: anywhere; } .release-main:hover .release-title { color: var(--accent); } .release-artist { margin-top: 0.3rem; color: var(--fg); } .release-meta { margin-top: 0.5rem; color: var(--muted); } .release-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.7rem; } .release-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .release-links a:hover, .release-links a:focus-visible { color: var(--accent); } /* releases page grid */ .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid .release { border-bottom: 1px solid var(--line); } .grid .release:nth-child(2n) { border-right: 0; } /* --- events -------------------------------------------------------------- */ .event-row { display: grid; grid-template-columns: 140px 1fr auto; align-items: center; gap: 1.5rem; padding: 1.25rem var(--gutter); border-bottom: 1px solid var(--line); } .event-list .event-row:last-child { border-bottom: 0; } .event-date { display: flex; flex-direction: column; } .event-day { font-weight: 800; font-stretch: 115%; font-size: 2.2rem; line-height: 1; color: var(--accent); } .event-day--tba { font-size: 1.6rem; padding-top: 0.3rem; } .event-month { margin-top: 0.25rem; color: var(--muted); } .event-info { min-width: 0; } .event-title { font-weight: 600; font-stretch: 100%; font-size: 1.1rem; line-height: 1.2; text-transform: none; letter-spacing: 0; } .event-where { margin-top: 0.4rem; color: var(--muted); } .event-lineup { margin-top: 0.35rem; font-size: 0.7rem; color: var(--muted); } /* Past events read back, not forward. */ .event-row--past .event-day { color: var(--muted); } .event-row--past .event-title { color: var(--muted); } /* --- product callout ----------------------------------------------------- */ .callout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .callout-text { padding: var(--gutter); border-right: 1px solid var(--fg); min-width: 0; } .callout-label { color: var(--accent); } .callout-name { margin-top: 0.75rem; font-stretch: 120%; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 0.9; } .callout-text .tag-row { margin-top: 1.25rem; } .callout-blurb { margin-top: 1.25rem; max-width: 60ch; } .callout-desc { margin-top: 0.75rem; max-width: 60ch; color: var(--muted); } .callout-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; } .callout-media { display: flex; align-items: center; justify-content: center; overflow: hidden; min-width: 0; } .callout-media img { width: 100%; height: 100%; object-fit: cover; } .callout-media--empty { aspect-ratio: 4 / 3; } .product-letter { font-weight: 800; font-stretch: 125%; font-size: clamp(6rem, 20vw, 16rem); line-height: 1; color: var(--line); text-transform: uppercase; } /* --- product cards ------------------------------------------------------- */ .rail--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } .product { padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .rail--products .product:nth-child(3n) { border-right: 0; } .product-main { display: block; text-decoration: none; } .product-media { aspect-ratio: 4 / 3; border: 1px solid var(--line); margin-bottom: 1rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .product-media img { width: 100%; height: 100%; object-fit: cover; } .product-media--empty .product-letter { font-size: 5rem; } .product-badge { color: var(--accent); } .product-name { margin-top: 0.4rem; font-weight: 600; font-stretch: 100%; font-size: 1.1rem; text-transform: none; letter-spacing: 0; } .product-blurb { margin-top: 0.4rem; color: var(--muted); } .product .tag-row { margin-top: 0.75rem; } /* --- statement ----------------------------------------------------------- */ .statement { padding: clamp(3rem, 8vw, 6rem) var(--gutter); } .statement-text { font-weight: 500; font-stretch: 105%; font-size: clamp(1.5rem, 3.5vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; } .statement .btn { margin-top: 2rem; } /* --- page head ----------------------------------------------------------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding: clamp(2rem, 6vw, 4rem) var(--gutter); border-bottom: 1px solid var(--fg); } .page-label { color: var(--muted); } .page-head h1 { margin-top: 1rem; font-stretch: 120%; font-size: clamp(3rem, 10vw, 8rem); line-height: 0.85; letter-spacing: -0.03em; } .page-count { color: var(--muted); white-space: nowrap; padding-bottom: 0.5rem; } /* Two-line spec block on the right of an inner page's head. */ .page-meta { text-align: right; padding-bottom: 0.5rem; white-space: nowrap; } .page-meta p { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .page-meta p + p { margin-top: 0.3rem; } /* --- catalogue table ----------------------------------------------------- */ .cat-wrap { overflow-x: auto; } .cat-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.75rem; text-align: left; } .cat-table th, .cat-table td { padding: 0.75rem var(--gutter); border-bottom: 1px solid var(--line); white-space: nowrap; } .cat-table th + th, .cat-table td + td { padding-left: 0; } .cat-table th { color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 400; } .cat-table tbody tr:last-child td { border-bottom: 0; } .cat-table tbody tr:hover { background: var(--fg); color: var(--bg); } .cat-listen a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; margin-right: 0.75rem; } .cat-listen a:last-child { margin-right: 0; } .cat-table tbody tr:hover .cat-listen a { color: var(--bg); } .cat-listen a:hover { color: var(--accent); } /* --- next up (accent block) ---------------------------------------------- */ .next-up { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding: clamp(2rem, 6vw, 4rem) var(--gutter); background: var(--accent); color: var(--bg); border-bottom: 1px solid var(--fg); } /* Mono text is bold throughout the accent block: regular weight reads thin against the orange. */ .next-up-label { font-family: var(--font-mono); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } .next-up-title { margin-top: 0.75rem; font-weight: 800; font-stretch: 120%; text-transform: uppercase; font-size: clamp(2.5rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.03em; } .next-up-meta, .next-up-lineup { margin-top: 1rem; font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .next-up-lineup { margin-top: 0.4rem; font-size: 0.75rem; } /* Button and tag inverted for the accent field. */ .btn--on-accent, .next-up .tag { font-weight: 700; } .btn--on-accent { border-color: var(--bg); color: var(--bg); } .btn--on-accent:hover, .btn--on-accent:focus-visible { background: var(--bg); color: var(--accent); } .tag--on-accent { border-color: var(--bg); color: var(--bg); } /* --- filter bar ---------------------------------------------------------- */ /* Full-bleed, like the .strip cells: the first button carries the gutter as its own padding, so the active block runs flush from the page edge while its label still lines up with everything else. */ .filter-bar { display: flex; flex-wrap: wrap; padding: 0; margin-bottom: -1px; border-bottom: 1px solid var(--fg); } .filter-btn { padding: 1rem 1.25rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); transition: background-color 0.1s linear, color 0.1s linear; } .filter-btn:first-child { padding-left: var(--gutter); } .filter-btn:hover { color: var(--fg); } .filter-btn[aria-pressed='true'] { background: var(--fg); color: var(--bg); } /* --- product rows (storefront) ------------------------------------------- */ .product-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid var(--fg); } .product-row-text { padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .product-row-badge { display: inline-block; } .product-row-name { margin-top: 1rem; font-stretch: 120%; font-size: clamp(2rem, 5vw, 4rem); line-height: 0.9; } .product-row-blurb { margin-top: 1.25rem; max-width: 60ch; } .product-row-desc { margin-top: 0.75rem; max-width: 60ch; color: var(--muted); } .product-row-text .tag-row { margin-top: 1.25rem; } .product-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; } .product-row-media { display: flex; align-items: center; justify-content: center; padding: var(--gutter); min-width: 0; } .product-row-media img { width: 100%; height: 100%; object-fit: contain; } /* Alternate rows put the image on the left. */ .product-row--flip .product-row-text { order: 2; border-right: 0; border-left: 1px solid var(--line); } .product-row--flip .product-row-media { order: 1; } .store-note { padding: 1.25rem var(--gutter); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } /* --- about: pillars, people, contact ------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--fg); } .pillar { padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .pillar:last-child { border-right: 0; } .pillar-index { color: var(--muted); } .pillar h3 { margin-top: 0.75rem; font-size: clamp(1.5rem, 2.5vw, 2rem); } .pillar p { margin-top: 1rem; color: var(--muted); } .pillar .btn { margin-top: 1.5rem; } .people-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .person { display: block; padding: var(--gutter); border-right: 1px solid var(--line); text-decoration: none; min-width: 0; } .person:last-child { border-right: 0; } .person-portrait { aspect-ratio: 1; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .person-portrait img { width: 100%; height: 100%; object-fit: cover; } .person:hover .person-portrait { border-color: var(--fg); } .person-name { font-size: 2rem; } .person:hover .person-name { color: var(--accent); } .person-role { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .person-bio { margin-top: 0.75rem; max-width: 40ch; } .person-link { display: inline-block; margin-top: 1.25rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .person:hover .person-link { color: var(--accent); } .contact { padding: clamp(2rem, 6vw, 4rem) var(--gutter); border-top: 1px solid var(--fg); } .contact-label { color: var(--muted); } .contact-email { display: inline-block; margin-top: 1rem; font-weight: 700; font-stretch: 110%; font-size: clamp(1.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; text-decoration: none; overflow-wrap: anywhere; } .contact-email:hover, .contact-email:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; } .contact-socials { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2rem; } .contact-socials a { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .contact-socials a:hover, .contact-socials a:focus-visible { color: var(--accent); } /* --- person page --------------------------------------------------------- */ .profile { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); border-bottom: 1px solid var(--fg); } .profile-aside { padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .profile-portrait { aspect-ratio: 4 / 5; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; } .profile-portrait img { width: 100%; height: 100%; object-fit: cover; } .profile-socials { margin-top: 1.5rem; } .profile-socials li { margin-bottom: 0.5rem; } .profile-socials a { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .profile-socials a:hover, .profile-socials a:focus-visible { color: var(--accent); } .profile-main { padding: var(--gutter); min-width: 0; } .prose { max-width: 60ch; } .prose p + p { margin-top: 1.25rem; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose a:hover, .prose a:focus-visible { color: var(--accent); } .prose .muted { color: var(--muted); } .work-item { padding: var(--gutter); border-bottom: 1px solid var(--line); } .work-item:last-child { border-bottom: 0; } .work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .work-title { font-weight: 600; font-stretch: 100%; font-size: 1.1rem; text-transform: none; letter-spacing: 0; } .work-meta { color: var(--muted); white-space: nowrap; } /* Normalised so source images of different widths line up down the page. */ .work-item img { width: 100%; margin-top: 1.5rem; border: 1px solid var(--line); } .work-item .btn { margin-top: 1.5rem; } .video { position: relative; margin-top: 1.5rem; aspect-ratio: 16 / 9; border: 1px solid var(--line); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Nested inside a .work-item, which already has gutter padding: pull the grid out so the release cells' own padding lines up with the page gutter. */ .grid--tight { margin: 1.5rem calc(var(--gutter) * -1) calc(var(--gutter) * -1); } .grid--tight .release { border-bottom: 0; } /* --- footer -------------------------------------------------------------- */ #site-footer { margin-top: 6rem; border-top: 1px solid var(--fg); } .foot-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot-col { padding: var(--gutter); border-right: 1px solid var(--line); min-width: 0; } .foot-col:last-child { border-right: 0; } .foot-mark { width: 32px; height: auto; } .foot-name { margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .foot-tagline { margin-top: 0.5rem; max-width: 30ch; color: var(--muted); } .foot-label { color: var(--muted); margin-bottom: 1rem; } .foot-links li { margin-bottom: 0.4rem; } .foot-links a { font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; } .foot-links a:hover, .foot-links a:focus-visible { color: var(--accent); } .foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem var(--gutter); border-top: 1px solid var(--line); font-size: 0.65rem; color: var(--muted); } /* =========================================================================== MOBILE / TABLET (< 900px) =========================================================================== */ @media (max-width: 899px) { .nav { display: none; } .menu-toggle { display: inline-block; /* padding, offset by the negative margin, gives a 44px touch target without moving the label off the gutter */ padding: 0.8rem 0.5rem; margin-right: -0.5rem; font-family: var(--font-mono); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; } /* hero */ .hero { gap: 4rem; } .hero-wordmark { font-size: clamp(3.5rem, 19vw, 9rem); } /* strip */ .strip { grid-template-columns: minmax(0, 1fr); } .strip-cell { border-right: 0; border-bottom: 1px solid var(--line); } .strip-cell:last-child { border-bottom: 0; } /* release rail becomes a snapping scroller */ .rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -ms-overflow-style: none; scrollbar-width: none; } .rail::-webkit-scrollbar { display: none; } .rail > * { flex: 0 0 72vw; scroll-snap-align: start; border-right: 1px solid var(--line); } .rail > *:last-child { border-right: 0; } /* events */ .event-row { grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 1rem; } .event-day { font-size: 1.8rem; } .event-action { grid-column: 2; margin-top: 0.85rem; } /* product callout */ .callout { grid-template-columns: minmax(0, 1fr); } .callout-text { border-right: 0; } .callout-media { border-top: 1px solid var(--fg); aspect-ratio: 4 / 3; /* contain, so a wide plugin screenshot keeps its title bar */ padding: var(--gutter); background: var(--bg); } .callout-media img { object-fit: contain; } /* next up */ .next-up { grid-template-columns: minmax(0, 1fr); align-items: start; } /* The filter bar wraps to two rows here, so let the buttons share each row evenly and the rules run edge to edge. */ .filter-btn { flex: 1 0 40%; } .filter-btn:nth-child(even) { border-right: 0; } /* storefront */ .product-row, .product-row--flip { grid-template-columns: minmax(0, 1fr); } .product-row-text, .product-row--flip .product-row-text { order: 1; border-right: 0; border-left: 0; } .product-row-media, .product-row--flip .product-row-media { order: 2; border-top: 1px solid var(--line); aspect-ratio: 4 / 3; } /* about */ .pillars, .people-grid { grid-template-columns: minmax(0, 1fr); } .pillar, .person { border-right: 0; border-bottom: 1px solid var(--line); } .pillar:last-child, .person:last-child { border-bottom: 0; } /* person page */ .profile { grid-template-columns: minmax(0, 1fr); } .profile-aside { border-right: 0; border-bottom: 1px solid var(--line); } /* the section title and its "all …" link collide once the title wraps */ .module-head { flex-direction: column; align-items: flex-start; gap: 0.6rem; } /* page head */ .page-head { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .page-count { padding-bottom: 0; } .page-meta { text-align: left; padding-bottom: 0; white-space: normal; } .cat-table th, .cat-table td { padding-left: var(--gutter); padding-right: 0.75rem; } .cat-table th:first-child, .cat-table td:first-child { padding-right: 0.75rem; } .cat-table th + th, .cat-table td + td { padding-left: 0; } /* footer */ .foot-top { grid-template-columns: minmax(0, 1fr); } .foot-col { border-right: 0; border-bottom: 1px solid var(--line); } .foot-col:last-child { border-bottom: 0; } #site-footer { margin-top: 4rem; } .foot-bottom { flex-direction: column; align-items: flex-start; gap: 0.35rem; } } /* Catalogue drops its two least useful columns on a phone. The wrapper still scrolls horizontally as a fallback if the rest cannot fit. */ @media (max-width: 599px) { .cat-hide { display: none; } } /* releases grid breakpoints */ @media (min-width: 600px) and (max-width: 1099px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid .release:nth-child(2n) { border-right: 1px solid var(--line); } .grid .release:nth-child(3n) { border-right: 0; } } @media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid .release:nth-child(2n) { border-right: 1px solid var(--line); } .grid .release:nth-child(4n) { border-right: 0; } } /* products row stacks earlier than the release rail */ @media (max-width: 899px) { .rail--products > * { flex: 0 0 80vw; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }