/** * base.css — Global reset + design system foundations * * All color, typography, and spacing values are resolved from CSS custom * properties (--ink, --paper, --accent, etc.) defined by each theme file. * This file never hardcodes values — only references variables. * * Loading order: theme CSS loads first (in ), then base.css. */ /* ─── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; } /* ─── Base typography ─────────────────────────────────────────────────────── */ body { font-family: var(--font-body, system-ui, sans-serif); font-size: var(--text-base, clamp(1rem, 1.1vw + 0.5rem, 1.125rem)); line-height: var(--leading-body, 1.6); color: var(--ink, #0E0E0E); background-color: var(--paper, #F4F1EA); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Accessible focus styles ─────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ─── Screen-reader only utility ──────────────────────────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ─── Links ───────────────────────────────────────────────────────────────── */ a { color: var(--accent, inherit); text-decoration: underline; text-underline-offset: 0.2em; } a:hover { text-decoration: none; } /* ─── Headings ─────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display, var(--font-body, system-ui, serif)); font-weight: var(--weight-display, 700); line-height: var(--leading-display, 1.1); letter-spacing: var(--tracking-display, -0.02em); color: var(--ink, inherit); } h1 { font-size: var(--text-h1, clamp(2.5rem, 6vw, 5rem)); } h2 { font-size: var(--text-h2, clamp(1.75rem, 4vw, 2.5rem)); } h3 { font-size: var(--text-h3, clamp(1.25rem, 2.5vw, 1.75rem)); } /* ─── Site nav ─────────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--paper, #F4F1EA); border-bottom: 1px solid var(--rule, rgba(0,0,0,0.1)); } .site-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-lg, 2rem); height: var(--nav-height, 3.5rem); max-width: var(--content-max, 1200px); margin: 0 auto; } .site-nav__wordmark { font-family: var(--font-display, inherit); font-size: var(--text-sm, 0.875rem); font-weight: var(--weight-display, 700); letter-spacing: var(--tracking-display, -0.01em); text-decoration: none; color: var(--ink); } .site-nav__links { display: flex; gap: var(--space-md, 1.5rem); list-style: none; } .site-nav__link { font-size: var(--text-sm, 0.875rem); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; color: var(--ink); } .site-nav__link:hover { color: var(--accent); } /* Mobile hamburger (CSS-only) */ .site-nav__toggle-input { display: none; } .site-nav__toggle-label { display: none; } @media (max-width: 720px) { .site-nav__toggle-label { display: flex; flex-direction: column; gap: 4px; cursor: pointer; padding: 0.5rem; } .site-nav__toggle-label span { display: block; width: 22px; height: 2px; background: var(--ink); transition: 0.2s; } .site-nav__links { display: none; position: absolute; top: var(--nav-height, 3.5rem); left: 0; right: 0; flex-direction: column; background: var(--paper); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--rule, rgba(0,0,0,0.1)); gap: var(--space-sm, 1rem); } .site-nav__toggle-input:checked ~ .site-nav__links { display: flex; } } /* ─── Hero ─────────────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; } .hero__image-wrap { position: absolute; inset: 0; } .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .hero__overlay { position: absolute; inset: 0; background: var(--hero-overlay, linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%)); } .hero__typographic-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ink); } .hero__bg-text { font-family: var(--font-display, serif); font-size: clamp(4rem, 15vw, 20rem); font-weight: var(--weight-display, 700); color: var(--paper); opacity: 0.04; white-space: nowrap; pointer-events: none; user-select: none; } .hero__content { position: relative; z-index: 1; padding: var(--space-xl, 3rem) var(--space-lg, 2rem); max-width: var(--content-max, 1200px); width: 100%; margin: 0 auto; } .hero__headline { color: var(--hero-text, #ffffff); font-size: var(--text-h1, clamp(2.5rem, 6vw, 5rem)); } .hero__tagline { color: var(--hero-text-muted, rgba(255,255,255,0.7)); font-size: var(--text-lg, 1.25rem); margin-top: 0.5rem; font-style: italic; } .hero__cta { display: inline-block; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background: var(--accent); color: var(--paper); text-decoration: none; font-weight: 600; letter-spacing: 0.04em; } /* ─── Tour list ────────────────────────────────────────────────────────────── */ .tour-list { padding: var(--section-gap, 5rem) var(--space-lg, 2rem); max-width: var(--content-max, 1200px); margin: 0 auto; } .tour-list__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2rem; } .tour-list__heading { font-size: var(--text-h2); } .tour-list__ical-link { font-size: var(--text-sm, 0.875rem); color: var(--muted); } .tour-list__table { width: 100%; border-collapse: collapse; } .tour-list__row { border-bottom: 1px solid var(--rule, rgba(0,0,0,0.1)); } .tour-list__row:hover { background: var(--hover-row, rgba(0,0,0,0.02)); } .tour-list__cell { padding: 0.75rem 0; font-size: var(--text-sm, 0.875rem); } .tour-list__cell--date { width: 12rem; color: var(--muted); font-variant-numeric: tabular-nums; } .tour-list__ticket-link { font-weight: 600; color: var(--accent); text-decoration: none; } .tour-list__sold-out { color: var(--muted); font-style: italic; } .tour-list__past { margin-top: 2rem; } .tour-list__past-toggle { cursor: pointer; color: var(--muted); font-size: var(--text-sm); } /* ─── Press strip ──────────────────────────────────────────────────────────── */ .press-strip { padding: var(--section-gap, 5rem) var(--space-lg, 2rem); background: var(--surface-alt, transparent); } .press-strip__quotes { list-style: none; display: grid; gap: var(--space-xl, 3rem); max-width: var(--content-max, 1200px); margin: 0 auto; } @media (min-width: 768px) { .press-strip__quotes { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } } .press-strip__quote p { font-style: italic; font-size: var(--text-lg, 1.125rem); line-height: 1.7; } .press-strip__source { font-size: var(--text-sm); color: var(--muted); font-style: normal; display: block; margin-top: 0.75rem; } .press-strip__source::before { content: '— '; } /* ─── Footer ───────────────────────────────────────────────────────────────── */ .site-footer { padding: var(--space-xl, 3rem) var(--space-lg, 2rem); border-top: 1px solid var(--rule, rgba(0,0,0,0.1)); margin-top: var(--section-gap, 5rem); } .site-footer__inner { max-width: var(--content-max, 1200px); margin: 0 auto; display: flex; flex-wrap: wrap; gap: var(--space-md, 1.5rem); justify-content: space-between; align-items: flex-start; } .site-footer__label { display: block; font-size: var(--text-xs, 0.75rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; } .site-footer__email { color: var(--ink); font-size: var(--text-sm); } .site-footer__social { display: flex; gap: 1rem; } .site-footer__social-link { font-size: var(--text-sm); color: var(--muted); text-decoration: none; } .site-footer__social-link:hover { color: var(--ink); } .site-footer__copyright { font-size: var(--text-xs, 0.75rem); color: var(--muted); width: 100%; } .site-footer__credit { color: var(--muted); } /* --- variant append @ 2026-07-03T01:03:21.365Z --- */ /* Mechanical fallback: quieter — restrained palette + lighter weights */ :root, [data-genre] { --ink: oklch(28% 0.01 250); --ink-soft: oklch(48% 0.01 250); --rule: oklch(85% 0.01 250); } body, .hero__headline, .hero__tagline, .home-about__text { font-weight: 350 !important; letter-spacing: -0.005em; } .hero__headline { font-size: 0.78em !important; } .hero__tagline { font-size: 0.92em !important; opacity: 0.78; } .home-about__text { line-height: 1.78 !important; max-width: 56ch; } section, .hero { padding-top: 7vh !important; padding-bottom: 7vh !important; } .site-nav__link { letter-spacing: 0.02em; opacity: 0.72; } /* --- variant append @ 2026-07-03T01:11:31.876Z --- */ /* Mechanical fallback: quieter — restrained palette + lighter weights */ :root, [data-genre] { --ink: oklch(28% 0.01 250); --ink-soft: oklch(48% 0.01 250); --rule: oklch(85% 0.01 250); } body, .hero__headline, .hero__tagline, .home-about__text { font-weight: 350 !important; letter-spacing: -0.005em; } .hero__headline { font-size: 0.78em !important; } .hero__tagline { font-size: 0.92em !important; opacity: 0.78; } .home-about__text { line-height: 1.78 !important; max-width: 56ch; } section, .hero { padding-top: 7vh !important; padding-bottom: 7vh !important; } .site-nav__link { letter-spacing: 0.02em; opacity: 0.72; } /* --- revision append @ 2026-07-03T01:39:40.490Z --- */ /* Mechanical: generic nudge (no keyword matched comment) */ .hero { padding-top: 6vh !important; padding-bottom: 6vh !important; } .hero__headline { letter-spacing: -0.02em !important; }