/* ========================================================================= Mysteries of the Deep — design tokens + components. Strictly within the v1.0 design system; layout patterns borrowed from the user's reference (brand left / nav right, mono labels, breadcrumbs, filled-rect CTA, italic notes, prev/next nav). ========================================================================= */ :root { /* Palette */ --motd-white: #FFFFFF; --motd-light: #F0F0F0; --motd-mid: #616161; --motd-near: #171717; --motd-deep: #0A0A0A; /* Type families */ --motd-head: 'Manrope', 'Runda', 'Helvetica Neue', sans-serif; /* Runda substitute */ --motd-body: 'Jost', 'Futura PT', 'Helvetica Neue', sans-serif; /* Futura PT sub */ --motd-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Base */ --motd-base: 17px; --motd-track: 0.03em; --motd-mono-track: 0.14em; /* Site */ --motd-margin: 2.6vw; /* Bumped from 1920px → 2400px so the layout fills modern wide-screen monitors (2560+ wide) instead of sitting in a 1920px column with big black gutters on either side. The cap is still here for ultra-wide displays so type doesn't get unmanageably long. */ --motd-max: 2400px; /* Diagonal background gradient — light gray (top-left) to near-black (bottom-right). Applied to when [data-bg-gradient="on"] is set on the root (driven by the Tweaks panel). When off, body falls back to the flat var(--bg) color set on html/body below. */ --bg-grad-start: #2a2a2a; --bg-grad-end: #050505; /* Theme — dark by default (cinematic) */ --bg: var(--motd-deep); --bg-soft: #111111; --fg: #e7e7e6; --fg-soft: rgba(231,231,230,.62); --fg-faint: rgba(231,231,230,.42); --rule: rgba(255,255,255,.10); --rule-soft: rgba(255,255,255,.06); --accent: #e7e7e6; /* achromatic by default */ --hero-h: 86vh; } /* Light theme */ [data-theme="light"] { --bg: var(--motd-white); --bg-soft: var(--motd-light); --fg: var(--motd-near); --fg-soft: var(--motd-mid); --fg-faint: rgba(23,23,23,.4); --rule: rgba(0,0,0,.12); --rule-soft: rgba(0,0,0,.06); --accent: var(--motd-near); /* Light gradient: pure white (top-left) down to a soft pale gray. */ --bg-grad-start: #ffffff; --bg-grad-end: #d8d8d8; } /* Type push — serif option (one of the bolder pushes) */ [data-typeface="serif"] { --motd-head: 'EB Garamond', 'Caslon', 'Times New Roman', serif; --motd-body: 'EB Garamond', 'Caslon', 'Times New Roman', serif; } [data-typeface="serif"] .h1 { line-height: 1.1em; } [data-typeface="serif"] .h2 { line-height: 1.2em; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); transition: background .35s ease, color .35s ease; } /* Stop large bleed-off-edge graphics (the manifesto sigil watermark on the About page, the hero watermark on Home) from creating a horizontal scrollbar. `clip` is preferred over `hidden` so it doesn't establish a scroll container — keeps any future position:sticky / scroll-snap usage working without surprises. */ html { overflow-x: clip; } body { overflow-x: clip; } body { font-family: var(--motd-body); font-size: var(--motd-base); font-weight: 300; letter-spacing: var(--motd-track); line-height: 1.6em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Diagonal background gradient — set on the BODY (not html) so the gradient fills the viewport and is fixed during scroll. Light gray at the top-left, falling to near-black at the bottom-right. min-height guarantees the gradient covers the whole viewport even on short pages. */ [data-bg-gradient="on"] body { background: linear-gradient(135deg, var(--bg-grad-start) 0%, var(--bg-grad-end) 100%) fixed; min-height: 100vh; } * { box-sizing: border-box; } a { color: inherit; text-decoration: none; } /* ========================================================================= Type scale (from system) ========================================================================= */ .h1, h1.h1 { font-family: var(--motd-head); font-size: clamp(48px, 7.4vw, 128px); font-weight: 200; line-height: 1em; letter-spacing: 0.005em; margin: 0; text-wrap: balance; } .h2, h2.h2 { font-family: var(--motd-head); font-size: clamp(28px, 3vw, 44px); font-weight: 300; line-height: 1.1em; letter-spacing: var(--motd-track); margin: 0; } .h3, .h3 { font-family: var(--motd-mono); font-size: 11px; font-weight: 400; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); margin: 0; line-height: 1.4; } .h4 { font-family: var(--motd-head); font-size: 20px; font-weight: 300; line-height: 1.3; margin: 0; letter-spacing: var(--motd-track); } .p1 { font-size: 22px; line-height: 1.55em; font-weight: 300; } .p2 { font-size: 17px; line-height: 1.7em; font-weight: 300; } .p3 { font-size: 14px; line-height: 1.7em; font-weight: 300; color: var(--fg-soft); } [data-typeface="serif"] .h3 { /* keep mono labels mono even in serif mode */ font-family: var(--motd-mono); } [data-typeface="serif"] .h1, [data-typeface="serif"] .h4 { letter-spacing: 0; font-weight: 400; font-style: normal; } [data-typeface="serif"] .h1 { font-weight: 400; } [data-typeface="serif"] .release-notes p, [data-typeface="serif"] .italic { font-style: italic; } [data-typeface="serif"] .h2 { font-weight: 400; letter-spacing: 0; } .mono { font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); } .italic { font-style: italic; } /* ========================================================================= Site shell ========================================================================= */ .site { min-height: 100vh; max-width: var(--motd-max); margin: 0 auto; padding: 0 var(--motd-margin); } .utility-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 0 10px; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-faint); border-bottom: 1px solid var(--rule-soft); } .utility-bar .links { display: flex; gap: 22px; } .utility-bar .links a:hover { color: var(--fg); } .main-nav { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; } .brand { font-family: var(--motd-head); font-weight: 300; font-size: clamp(28px, 2.4vw, 36px); letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 14px; cursor: pointer; } [data-typeface="serif"] .brand { font-weight: 400; font-style: italic; } .brand .mark { display: inline-block; width: 28px; height: 28px; flex: 0 0 auto; user-select: none; } /* On the light theme the logo PNG (white-on-transparent) needs to flip to read as currentColor. */ [data-theme="light"] .brand .mark { filter: invert(1); } .nav-links { list-style: none; display: flex; gap: 36px; margin: 0; padding: 0; font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; } [data-typeface="serif"] .nav-links { font-family: var(--motd-mono); /* keep nav mono */ } .nav-links li { cursor: pointer; color: var(--fg-soft); transition: color .15s; } .nav-links li:hover, .nav-links li.active { color: var(--fg); } .nav-links li.active { position: relative; } .nav-links li.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--accent); } .breadcrumb { font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); padding: 22px 0 0; cursor: pointer; } .breadcrumb:hover { color: var(--fg); } /* ========================================================================= Buttons (from system) ========================================================================= */ .btn-primary, .btn-secondary { background: transparent; border: 2px solid currentColor; border-radius: 999px; font-family: var(--motd-body); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 0.8em; color: inherit; transition: background .18s ease, color .18s ease; } .btn-primary { font-size: 11px; padding: 14px 28px; } .btn-secondary{ font-size: 13px; padding: 18px 38px; } .btn-primary:hover, .btn-secondary:hover { background: var(--fg); color: var(--bg); } .btn-tertiary { background: var(--fg); color: var(--bg); border: 0; border-radius: 4px; padding: 16px 28px; font-family: var(--motd-body); font-weight: 500; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: opacity .18s; } .btn-tertiary:hover { opacity: .85; } [data-typeface="serif"] .btn-tertiary, [data-typeface="serif"] .btn-primary, [data-typeface="serif"] .btn-secondary { font-family: var(--motd-body); } /* ========================================================================= Atmospheric image placeholder — abstract water/depth/texture ========================================================================= */ .atmo { position: relative; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 35% 30%, rgba(120,140,160,.10) 0%, rgba(0,0,0,0) 60%), radial-gradient(ellipse 60% 50% at 70% 75%, rgba(180,200,220,.06) 0%, rgba(0,0,0,0) 55%), linear-gradient(180deg, #0e1014 0%, #050608 100%); isolation: isolate; } .atmo::before { /* horizontal waveform-ish bands */ content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 2px, rgba(0,0,0,0) 2px 9px), repeating-linear-gradient(89deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,0) 1px 4px); mix-blend-mode: screen; pointer-events: none; } .atmo::after { /* grain */ content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px); background-size: 3px 3px; mix-blend-mode: overlay; opacity: .6; pointer-events: none; } .atmo .caption { position: absolute; left: 14px; bottom: 12px; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: rgba(255,255,255,.55); z-index: 2; } .atmo .corner { position: absolute; right: 14px; top: 12px; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: rgba(255,255,255,.45); z-index: 2; } /* Generated cover artwork (proto-artwork.jsx) */ .artwork { position: relative; overflow: hidden; isolation: isolate; background: #06080a; } .artwork svg { user-select: none; pointer-events: none; } .artwork-corner { position: absolute; right: 12px; top: 10px; z-index: 2; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: rgba(255,255,255,.55); } /* ========================================================================= Chapter cover — podcast pattern. Artwork is itself the external link. Hover lifts the artwork slightly and reveals the "Listen on Soundcloud ↗" capsule. Click → Soundcloud (target=_blank handled in atom). ========================================================================= */ .chapter-cover { position: relative; overflow: hidden; isolation: isolate; cursor: pointer; background: #06080a; color: #f5f4f1; text-decoration: none; transition: transform .25s ease; } .chapter-cover:hover { transform: translateY(-2px); } .chapter-cover-over { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 12px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); opacity: 0; transition: opacity .25s ease; pointer-events: none; } .chapter-cover:hover .chapter-cover-over { opacity: 1; } .chapter-cover-over .play-ring { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #f5f4f1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .chapter-cover-over .play-ring::before { content: ''; display: block; width: 0; height: 0; border-left: 10px solid #f5f4f1; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 4px; } .chapter-cover-cap { font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: #f5f4f1; } .chapter-cover-tag { position: absolute; right: 12px; top: 10px; z-index: 2; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: rgba(245,244,241,.55); } /* ========================================================================= Listen capsule — used in the cinematic hero. A round play ring + running timecode label. Borrows the outline language from .btn-primary but stays distinct from the rounded-rect buttons. ========================================================================= */ .cap { display: inline-flex; align-items: center; gap: 14px; padding: 8px 22px 8px 8px; background: transparent; border: 1px solid currentColor; border-radius: 999px; color: inherit; cursor: pointer; font-family: var(--motd-body); transition: background .18s ease, color .18s ease; } .cap:hover { background: var(--fg); color: var(--bg); } .cap-ring { width: 34px; height: 34px; border-radius: 50%; border: 1px solid currentColor; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .cap-tri { display: block; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 3px; } .cap-label { font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; } /* ========================================================================= Hero overlay — forces light text on the dark atmospheric image regardless of page theme. Used for hero A where text sits over .atmo. ========================================================================= */ .hero-over-atmo { --fg: #f5f4f1; --fg-soft: rgba(245,244,241,.72); --fg-faint: rgba(245,244,241,.48); color: #f5f4f1; } .hero-over-atmo .h3 { color: rgba(245,244,241,.72); } .hero-over-atmo .btn-primary, .hero-over-atmo .btn-secondary { color: #f5f4f1; } .hero-over-atmo .btn-primary:hover, .hero-over-atmo .btn-secondary:hover { background: #f5f4f1; color: #0a0a0a; } /* Variants tinted by accent */ .atmo.accent { background: radial-gradient(ellipse 80% 60% at 35% 30%, color-mix(in oklab, var(--accent) 22%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 70% 75%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 55%), linear-gradient(180deg, #0e1014 0%, #050608 100%); } .atmo.warm { background: radial-gradient(ellipse 80% 60% at 35% 30%, rgba(180,140,110,.12) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 70% 75%, rgba(220,180,140,.06) 0%, transparent 55%), linear-gradient(180deg, #16100c 0%, #070503 100%); } .atmo.icy { background: radial-gradient(ellipse 80% 60% at 35% 30%, rgba(140,170,200,.16) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 70% 75%, rgba(160,190,220,.10) 0%, transparent 55%), linear-gradient(180deg, #0a1018 0%, #03060a 100%); } /* Cover placeholders — same atmospheric treatment, square */ .cover { aspect-ratio: 1 / 1; width: 100%; } /* ========================================================================= Releases grid ========================================================================= */ .releases-grid { display: grid; gap: 60px 32px; } .releases-grid.density-3 { grid-template-columns: repeat(3, 1fr); } .releases-grid.density-4 { grid-template-columns: repeat(4, 1fr); } .releases-grid.density-5 { grid-template-columns: repeat(5, 1fr); } .release-card { display: flex; flex-direction: column; gap: 16px; cursor: pointer; } .release-card .meta { display: flex; flex-direction: column; gap: 4px; } .release-card .cat { font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-faint); } .release-card .title { font-family: var(--motd-head); font-size: 18px; font-weight: 300; line-height: 1.3; letter-spacing: var(--motd-track); } .release-card .artist{ font-size: 14px; color: var(--fg-soft); } .release-card:hover .title { color: var(--accent); } /* ========================================================================= Tracklist ========================================================================= */ .tracklist { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; } .tracklist--digital { grid-template-columns: minmax(0, 560px); } .tracklist .side .h3 { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); } .tracklist .row { display: grid; grid-template-columns: 32px 1fr; gap: 18px; padding: 10px 0; font-family: var(--motd-mono); font-size: 13px; color: var(--fg); } .tracklist .row .n { color: var(--fg-faint); } .tracklist .row .t { font-family: var(--motd-mono); } .tracklist .row .d { color: var(--fg-faint); } /* ========================================================================= Embeds / iframe placeholders ========================================================================= */ .embed { background: var(--bg-soft); border: 1px solid var(--rule); padding: 18px 20px; display: flex; align-items: center; gap: 18px; font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); } .embed .play-ring { width: 38px; height: 38px; border-radius: 50%; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; } .embed .play-ring::before { content: ''; display: block; width: 0; height: 0; border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; } .embed .waveform { flex: 1; height: 28px; background: repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 4px); opacity: .35; mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); } .embed.tall { display: block; padding: 22px; height: 220px; position: relative; } .embed.tall .waveform { height: 80px; margin: 24px 0; } /* Form fields (system — bottom border only) */ .field { width: 100%; background: var(--bg-soft); border: 0; border-bottom: 1px solid var(--fg-soft); padding: 12px 12px; font-family: var(--motd-body); font-size: 14px; font-weight: 300; color: inherit; letter-spacing: var(--motd-track); } .field:focus { outline: none; border-bottom-color: var(--accent); } .field::placeholder { color: var(--fg-faint); } /* ========================================================================= Footer / prev-next ========================================================================= */ .prev-next { display: flex; justify-content: space-between; padding: 36px 0; border-top: 1px solid var(--rule); font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); } .prev-next a { cursor: pointer; } .prev-next a:hover { color: var(--fg); } .footer-minimal { margin-top: 80px; padding: 30px 0; border-top: 1px solid var(--rule); } .footer-minimal .copy { margin: 0; padding: 0; border: 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .footer-minimal a { color: inherit; } .footer-minimal a:hover { color: var(--fg); } /* Section header (used inside pages) */ .section-head { display: flex; align-items: baseline; justify-content: space-between; padding: 60px 0 30px; border-bottom: 1px solid var(--rule); } .section-head .right { font-family: var(--motd-mono); font-size: 11px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; color: var(--fg-soft); cursor: pointer; } /* Misc */ .rule { height: 1px; background: var(--rule); } .spacer-l { height: 80px; } .spacer-m { height: 40px; } .spacer-s { height: 20px; } /* ========================================================================= Sigils — label graphic system (motd-sigils.jsx). ========================================================================= */ .motd-sigil { color: inherit; } .sigil-divider .mono { font-size: 10px; } /* When sigils are turned off via the Tweak, everything keyed off the [data-graphics="off"] root vanishes. The hero gets its corner mark back to a bare mono label automatically because the corner-mark sigil is inside [data-graphics-mark] which we hide. */ [data-graphics="off"] [data-graphics-only] { display: none !important; } /* Hero corner cartouche slot. Positioned via inline style at the call site; this just gives the wrapper a default subtle hover lift. */ .hero-cartouche { transition: opacity .25s ease; } .hero-cartouche:hover { opacity: 1; } /* About-page graphic system showcase — small grid of sigils with mono labels underneath. Hover slightly emphasises a cell. */ .sigil-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 28px; } /* On the About page the full 60-mark set needs more columns; that grid uses `.sigil-grid-wide` to opt into 6-up at desktop sizes. */ .sigil-grid-wide { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 0; } .sigil-grid .cell { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 10px 20px; border: 1px solid var(--rule-soft); color: var(--fg-soft); transition: color .2s ease, border-color .2s ease, background .2s ease; } .sigil-grid .cell:hover { color: var(--fg); border-color: var(--rule); background: var(--bg-soft); } .sigil-grid .cell .name { font-family: var(--motd-mono); font-size: 10px; letter-spacing: var(--motd-mono-track); text-transform: uppercase; } @media (max-width: 720px) { .sigil-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; } .sigil-grid-wide { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px !important; } } @media (max-width: 480px) { .sigil-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .sigil-grid-wide { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* Smooth page transitions */ .page-fade { animation: fadeIn .35s ease both; } @keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* Tweaks panel is dark-aware too — light overrides */ [data-theme="light"] .embed { background: var(--motd-light); } /* Disable native motion when system says off (default) */ [data-motion="off"] .page-fade { animation: none; } /* ========================================================================= Event cards (Events page) Larger blocks in a responsive grid, grouped by year. Card flyer dominates; metadata sits below. External-link arrow appears on the flyer corner only when the event has a real link (dead-FB rows render as static cards). ========================================================================= */ .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; } .event-card { display: grid; gap: 16px; text-decoration: none; color: inherit; cursor: pointer; transition: opacity .15s ease; } .event-card:hover { opacity: 0.92; } .event-card-static { cursor: default; } .event-card-static:hover { opacity: 1; } .event-card-flyer { position: relative; aspect-ratio: 1 / 1; background: #06080a; overflow: hidden; isolation: isolate; } .event-card-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; } .event-card-placeholder { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, #0e1216 0%, #060709 100%); } .event-card-arrow { position: absolute; top: 14px; right: 14px; font-family: var(--motd-mono); font-size: 14px; color: rgba(245, 244, 241, 0.7); background: rgba(0, 0, 0, 0.4); padding: 4px 8px; letter-spacing: 0.04em; backdrop-filter: blur(4px); z-index: 2; } .event-card-meta { display: grid; gap: 8px; } .event-card-meta .mono { font-size: 11px; color: var(--fg-soft); } .event-card-name { font-family: var(--motd-head); font-weight: 300; font-size: 22px; line-height: 1.22; letter-spacing: var(--motd-track); color: var(--fg); margin-top: 2px; } .event-card-lineup { color: var(--fg-soft); } .event-card-where { color: var(--fg-faint); } /* ========================================================================= MOBILE — single breakpoint at 720px and below. Selectors do NOT scope under .site main because the app has no
element (pages are rendered as direct sections inside .site). Most layout sections use React inline styles, so we match the style attr string and override with !important. ========================================================================= */ @media (max-width: 720px) { :root { --motd-margin: 4vw; } /* Typography */ .h1 { font-size: clamp(36px, 10vw, 64px) !important; line-height: 1.02 !important; } .h2 { font-size: clamp(26px, 7vw, 40px) !important; line-height: 1.06 !important; } .h3 { font-size: 11px !important; } .h4 { font-size: 16px !important; } .p1 { font-size: 17px !important; } .p2 { font-size: 15px !important; } /* Top bar — keep wordmark on its own row; let the nav links wrap. */ .main-nav { flex-wrap: wrap !important; gap: 12px 16px !important; padding: 16px 0 !important; } .main-nav .brand { font-size: 24px !important; width: 100% !important; margin-bottom: 6px !important; } .main-nav .links { flex-wrap: wrap !important; gap: 10px 16px !important; } .main-nav .links a { font-size: 11px !important; } .utility-bar { padding: 8px 0 !important; } /* Hero / split layouts — any section with an inline grid-template-columns collapses to a single column. Works regardless of dom nesting. */ section[style*="grid-template-columns"], div[style*="grid-template-columns"]:not(.event-grid):not(.release-grid):not([style*="repeat(3"]):not([style*="repeat(2"]):not([style*="repeat(4"]) { grid-template-columns: 1fr !important; column-gap: 0 !important; row-gap: 24px !important; align-items: start !important; } /* Latest release / featured chapter cover — when stacked, drop the viewport-relative caps so the image fills the column. */ section img[alt*="cover artwork"], .chapter-cover, div[style*="aspect-ratio: 1 / 1"][style*="max-height"], div[style*="aspectRatio"][style*="maxHeight"] { max-width: 100% !important; max-height: none !important; width: 100% !important; } /* 3-up catalog / recent chapters grids → 2-up, then 1-up under 480px. */ div[style*="repeat(3"], .release-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; } /* Releases catalog — overrides .density-3/4/5 which use static repeat(N, 1fr) at higher specificity than the inline-style matcher. */ .releases-grid, .releases-grid.density-3, .releases-grid.density-4, .releases-grid.density-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 14px !important; } .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; } /* Release detail tracklist — 2 columns → 1 column. */ .tracklist { grid-template-columns: 1fr !important; gap: 28px !important; } /* Forms — full-width inputs, 16px font to disable iOS focus-zoom. */ .field { font-size: 16px !important; width: 100% !important; } /* Footer — stack the bandcamp/soundcloud/insta links vertically. */ .footer-minimal .copy { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } .footer-minimal .copy > div { flex-wrap: wrap !important; } /* Tweaks panel hidden on mobile — it's a dev tool, not for visitors. */ .tweaks-panel { display: none !important; } } @media (max-width: 480px) { div[style*="repeat(3"], .release-grid, .event-grid, .releases-grid { grid-template-columns: 1fr !important; } }