/* dragthelake - still water, one accent, no chrome */ @font-face { font-family: 'Funnel Display'; src: url('/fonts/funnel-display.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Funnel Sans'; src: url('/fonts/funnel-sans.woff2') format('woff2'); font-weight: 300 800; font-style: normal; font-display: swap; } :root { color-scheme: light dark; --max: 1080px; --paper: light-dark(oklch(97.5% 0 0), oklch(17% 0 0)); --ink: light-dark(oklch(24% 0 0), oklch(92% 0 0)); --muted: light-dark(oklch(48% 0 0), oklch(64% 0 0)); --faint: light-dark(oklch(60% 0 0), oklch(48% 0 0)); --accent: light-dark(oklch(45% 0 0), oklch(75% 0 0)); --rule: light-dark(oklch(89% 0 0), oklch(29% 0 0)); --serif: 'Funnel Display', 'Funnel Sans', system-ui, sans-serif; --sans: 'Funnel Sans', system-ui, 'Segoe UI', sans-serif; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 400 15px/1.5 var(--sans); font-feature-settings: 'kern' 1, 'liga' 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: light-dark(oklch(88% 0 0), oklch(35% 0 0)); } a { color: inherit; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* ---- masthead ---- */ .masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; max-width: var(--max); margin: 0 auto; padding: clamp(1.4rem, 3vw, 2.6rem) clamp(1.2rem, 3vw, 2.6rem) clamp(1rem, 2vw, 1.6rem); } .masthead .brand { margin: 0; line-height: 1; } .masthead .brand a { display: block; } .masthead .brand img { display: block; height: clamp(2.2rem, 3.6vw, 3rem); width: auto; } .tagline { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.85rem; } @media (prefers-color-scheme: dark) { .masthead .brand img { filter: invert(1); } } .masthead-meta { margin: 0; color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* ---- filter tabs ---- */ .filter { max-width: var(--max); margin: 0 auto; padding: clamp(0.8rem, 1.5vw, 1.2rem) clamp(1.2rem, 3vw, 2.6rem) 0; display: flex; gap: 1.4rem; flex-wrap: wrap; } .filter button { padding: 0; border: 0; background: none; color: var(--faint); font: 600 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .filter button:hover { color: var(--ink); } .filter button.on { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; } /* per-category hide rules are generated by the server into , keyed on html[data-filter], so a saved filter applies before first paint */ /* ---- popular band ---- */ .popular { max-width: var(--max); margin: 0 auto; padding: clamp(1.2rem, 2vw, 1.8rem) clamp(1.2rem, 3vw, 2.6rem) clamp(1.4rem, 2.2vw, 2rem); } .popular h2 { margin: 0 0 1rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .popular ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem clamp(1.6rem, 2.5vw, 2.4rem); } @media (max-width: 760px) { .popular ol { grid-template-columns: 1fr; } } .popular li { min-width: 0; font-size: 0.88rem; line-height: 1.4; } .popular li a { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; } .popular li a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .popular .src { display: block; margin-top: 0.15rem; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } /* ---- the lake: columns of headlines ---- */ .lake { max-width: var(--max); margin: 0 auto; padding: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 2.5vw, 2.6rem) clamp(1.6rem, 2.5vw, 2.4rem); } @media (max-width: 980px) { .lake { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .lake { grid-template-columns: 1fr; } } .column { min-width: 0; /* near-instant: 150ms rise, 10ms stagger capped at 90ms so a page of 30 columns is fully settled in under a quarter second */ animation: surface 150ms cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: min(calc(var(--i, 0) * 10ms), 90ms); } @keyframes surface { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .column { animation: none; } } .column h2 { margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule); font-family: var(--sans); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .column h2 a { color: var(--accent); text-decoration: none; } .column h2 a:hover { text-decoration: underline; text-underline-offset: 3px; } .column ol { list-style: none; margin: 0; padding: 0; } .column li { margin-bottom: 0.62rem; font-size: 0.84rem; line-height: 1.42; } .column li a { text-decoration: none; color: var(--ink); overflow-wrap: anywhere; } .column li a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .column li a:visited { color: var(--muted); } .column li.extra[hidden] { display: none; } .show-more { margin-top: 0.3rem; padding: 0; border: 0; background: none; color: var(--muted); font: 600 0.72rem/1.5 var(--sans); letter-spacing: 0.04em; cursor: pointer; } .show-more:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ---- empty state ---- */ .empty { grid-column: 1 / -1; padding: clamp(3rem, 8vw, 6rem) 0; text-align: center; } .empty p { margin: 0 0 0.6rem; color: var(--muted); } .empty p:first-child { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; color: var(--ink); } .empty pre { display: inline-block; text-align: left; margin: 1.2rem auto 0; padding: 1rem 1.2rem; border: 1px solid var(--rule); border-radius: 8px; font-size: 0.78rem; line-height: 1.6; color: var(--muted); overflow-x: auto; max-width: 100%; } /* ---- archive ---- */ .day-head { max-width: var(--max); margin: 0 auto; padding: clamp(0.6rem, 1.5vw, 1.2rem) clamp(1.2rem, 3vw, 2.6rem) 0; } .day-title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.15; text-wrap: balance; } .day-meta { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .day-live { margin-left: 0.5rem; font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .daynav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-top: 0.9rem; font: 600 0.72rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; } .daynav a { color: var(--faint); text-decoration: none; } .daynav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; } .archive-index { max-width: var(--max); margin: 0 auto; padding: clamp(1.2rem, 2.5vw, 2.2rem) clamp(1.2rem, 3vw, 2.6rem) clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 2.5vw, 2.6rem) clamp(1.6rem, 2.5vw, 2.4rem); } @media (max-width: 980px) { .archive-index { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .archive-index { grid-template-columns: 1fr; } } .month h2 { margin: 0 0 0.9rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--rule); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .month ol { list-style: none; margin: 0; padding: 0; } .month li { margin-bottom: 0.62rem; font-size: 0.84rem; line-height: 1.42; } .month li a { color: var(--ink); text-decoration: none; } .month li a:hover { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .month .src { margin-left: 0.4rem; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); } .empty a { color: var(--ink); } /* ---- colophon ---- */ .colophon { max-width: var(--max); margin: 0 auto; padding: 1.4rem clamp(1.2rem, 3vw, 2.6rem) 2.2rem; } .colophon p { margin: 0; color: var(--faint); font-size: 0.72rem; letter-spacing: 0.03em; } .colophon a { color: var(--faint); text-decoration: none; } .colophon a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } /* ---- all hidden ---- */ .all-hidden-note { grid-column: 1 / -1; text-align: center; padding: clamp(2rem, 6vw, 4rem) 0; color: var(--muted); font-family: var(--serif); font-size: 1.3rem; } /* ---- settings ---- */ .settings-open { position: fixed; right: clamp(0.8rem, 2vw, 1.6rem); bottom: clamp(0.8rem, 2vw, 1.4rem); z-index: 10; padding: 0.45rem 0.95rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--muted); font: 600 0.7rem/1 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; } .settings-open:hover { color: var(--ink); border-color: var(--muted); } .settings-dialog:not([open]) { display: none; } .settings-dialog { width: min(480px, calc(100vw - 2rem)); height: min(640px, calc(100vh - 4rem)); margin: auto; padding: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink); font: 400 14px/1.5 var(--sans); display: flex; flex-direction: column; overflow: hidden; } .settings-dialog::backdrop { background: light-dark(oklch(20% 0 0 / 0.35), oklch(10% 0 0 / 0.55)); } .settings-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.3rem 0; } .settings-head h2 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; } .settings-close { border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem; } .settings-close:hover { color: var(--ink); } .settings-hint { margin: 0.3rem 1.3rem 0.9rem; color: var(--muted); font-size: 0.78rem; } .source-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 0.7rem; overscroll-behavior: contain; } .source-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.42rem 0.4rem; border-radius: 7px; cursor: grab; } .source-row.dragging { opacity: 0.45; } .source-row:has(input:checked) label { color: var(--ink); } .source-row input[type='checkbox'] { accent-color: var(--ink); margin: 0; } .source-row label { color: var(--muted); cursor: pointer; overflow-wrap: anywhere; } .row-cat { margin-left: auto; font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); } .row-cat.blank { visibility: hidden; } .move-btn { border: 0; background: none; color: var(--faint); font-size: 0.85rem; line-height: 1; padding: 0.25rem 0.3rem; cursor: pointer; } .move-btn:hover { color: var(--ink); } .grip { color: var(--faint); font-size: 0.7rem; letter-spacing: -0.1em; cursor: grab; } .settings-foot { flex: none; display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.3rem 1.2rem; border-top: 1px solid var(--rule); } .settings-foot button { font: 600 0.8rem/1 var(--sans); cursor: pointer; } .settings-reset { border: 0; background: none; color: var(--muted); } .settings-reset:hover { color: var(--ink); } .settings-save { padding: 0.55rem 1.3rem; border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); } .settings-save:hover { opacity: 0.85; }