@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@200;300;400;500&display=swap');

:root {
	--ink: #cccccc;
	--paper: #080808;
	--line: #b3b3b3;
	--muted: #b3b3b3;
	--heading: #ffffff;
	--raised: #202020;
	--unit: clamp(18px, 3vw, 42px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.52 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
a { color: inherit; }

.site-header { height: 64px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--unit); border-bottom: 1px solid var(--line); }
.site-name { color: var(--ink); font: 12px 'IBM Plex Mono', monospace; text-decoration: none; }
.site-name:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-nav { grid-column: 2; display: flex; gap: clamp(14px, 3vw, 38px); }
.site-nav a { color: var(--muted); font: 12px 'IBM Plex Mono', monospace; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.site-footer { padding: 18px var(--unit); color: var(--muted); text-align: center; font: 11px 'IBM Plex Mono', monospace; }

.archive-page { min-height: calc(100vh - 97px); padding: 70px var(--unit); }
.page-intro { max-width: 900px; margin: 0 auto 58px; }
.page-intro h1 { margin: 0; color: var(--heading); font-size: 18px; font-weight: 500; }

/* Events */
.events-browser { height: calc(100svh - 97px); display: grid; grid-template-columns: minmax(210px, 25%) minmax(420px, 75%); }
.events-index { min-height: 0; overflow: auto; padding: 34px 26px 54px; }
.events-index header { margin-bottom: 30px; }
.events-index h1 { margin: 0 0 5px; color: var(--heading); font-size: 18px; font-weight: 500; }
.events-index header > p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.events-index ol { margin: 0; padding: 0; list-style: none; }
.events-index li { margin: 0 0 18px; }
.events-index button { width: 100%; display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 9px; padding: 0; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 13px/1.38 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.events-index button time { color: var(--muted); font: 11px 'IBM Plex Mono', monospace; }
.index-information { min-width: 0; display: block; }
.index-information strong, .index-information em { display: block; font-size: 13px; font-style: normal; font-weight: 400; }
.index-information strong { color: var(--heading); white-space: nowrap; }
.index-information em { color: var(--muted); }
.events-index button:hover .index-information, .events-index button.active .index-information { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.event-detail { min-height: 0; overflow: auto; scroll-behavior: smooth; background: #ffffff; color: #111111; }
.event-detail article { max-width: 720px; padding: clamp(38px, 7vw, 90px); scroll-margin-top: 20px; }
.event-detail article + article { border-top: 1px solid #b3b3b3; }
.event-detail time { display: block; color: #777777; font: 13px 'IBM Plex Mono', monospace; }
.event-detail h2 { margin: 8px 0 12px; color: #111111; font-size: 19px; font-weight: 500; line-height: 1.3; }
.detail-people, .detail-place { margin: 0; font-size: 16px; line-height: 1.5; }
.detail-place { color: #666666; }
.event-archive { margin-top: 46px; padding-top: 18px; border-top: 1px solid #b3b3b3; }
.event-archive > p:first-child { max-width: 590px; margin: 0 0 24px; font-size: 16px; line-height: 1.6; }
.archive-empty { margin: 30px 0 0; color: #777777; font: 13px 'IBM Plex Mono', monospace; }
.event-images { display: grid; gap: 12px; }
.event-images img { width: 100%; height: auto; display: block; }
.events-index, .event-detail { -ms-overflow-style: none; scrollbar-width: none; }
.events-index::-webkit-scrollbar, .event-detail::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Work */
.work-page { max-width: 1320px; margin: auto; }
.work-page .page-intro { max-width: none; margin: 0 0 58px; }
.work-page .page-intro h1 { font: 500 18px 'IBM Plex Mono', monospace; text-align: left; }
.release-entry { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(42px, 5vw, 70px); padding: 28px 0 72px; border-top: 1px solid var(--line); }
.release-meta { display: flex; flex-direction: column; align-items: stretch; }
.release-heading { margin: 0 0 24px; }
.release-meta h2 { margin: 0; color: var(--heading); font: 300 18px/1.35 'IBM Plex Mono', 'PingFang TC', 'PingFang HK', monospace; }
.release-rule { display: flex; justify-content: space-between; margin-top: 8px; padding: 8px 0; border-block: 1px solid rgba(255, 255, 255, .45); font: 200 12px/1.45 'IBM Plex Mono', monospace; }
.release-description { margin: 0 0 24px; font-size: 15px; line-height: 1.55; }
.release-credits, .release-section { font: 200 12px/1.45 'IBM Plex Mono', monospace; }
.release-credits { margin: 0; padding: 0; list-style: none; }
.release-section { margin: 40px 0 0; }
.release-section h3 { margin: 0 0 16px; color: var(--heading); font-weight: 300; }
.release-section ol { margin: 0; padding: 0; list-style: none; }
.release-text { display: grid; gap: 4px; }
.release-text p { margin: 0; }
.archive-work .release-description { max-width: 58ch; }
.archive-work .release-credits { color: var(--muted); }
.release-sleeve { min-height: 310px; background: rgba(255, 255, 255, .9); }
.audio-placeholder { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 14px; background: var(--raised); color: var(--ink); font: 12px 'IBM Plex Mono', monospace; text-decoration: none; }
.audio-placeholder:hover { background: #2b2b2b; }
.audio-placeholder p { margin: 0; }

/* Texts */
.notes-reading-room { min-height: calc(100svh - 64px); padding: 44px 0 84px; background: #eeeeee; color: #303030; }
.note-reading-pane { width: min(100% - 32px, 760px); margin: 0 auto; }
.notes-single-heading { margin: 0 0 16px; padding: 0 24px; }
.notes-single-heading h1 { margin: 0; color: #303030; font: 500 15px 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.note-reading-entry { margin: 0; padding: 28px 42px 34px; border-bottom: 1px solid #dedede; background: #ffffff; color: #303030; }
.note-post-header { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.note-avatar { width: 42px; height: 42px; display: grid; flex: 0 0 42px; place-items: center; border-radius: 50%; background: #a0a0a0; color: #ffffff; font: 400 12px 'IBM Plex Mono', monospace; }
.note-post-header h2 { margin: 0; color: #303030; font: 500 16px/1.2 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.note-reading-meta { margin: 3px 0 0; color: #858585; font: 12px/1.2 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.note-reading-text p { margin: 0 0 16px; color: #353535; font: 400 17px/1.55 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.note-reading-text p:last-child { margin-bottom: 0; }

/* About */
.about-stream { max-width: 390px; margin: 0 auto; }
.about-stream section { padding: 0 0 64px; }
.about-stream h2 { margin: 0 0 24px; color: var(--heading); font: 400 17px/1.4 'IBM Plex Mono', 'PingFang TC', monospace; }
.about-stream h2 span { color: var(--muted); font-weight: 300; }
.about-reading { display: grid; gap: 24px; }
.about-reading > div { max-width: 100%; }
.about-reading p, .about-contact p { max-width: 100%; margin: 0; color: var(--ink); font: 400 15px/1.65 'PingFang TC', 'PingFang HK', Arial, sans-serif; }
.about-reading [lang='en'] p { font: 300 14px/1.65 'IBM Plex Mono', monospace; }
.about-contact { padding-bottom: 0 !important; }
.about-contact a { color: var(--ink); text-underline-offset: 4px; }

@media (max-width: 680px) {
	.site-header { grid-template-columns: 24px 1fr; height: auto; min-height: 58px; padding-block: 16px; }
	.site-nav { grid-column: 2; justify-content: flex-end; flex-wrap: wrap; gap: 8px 14px; }
	.site-nav a { font-size: 11px; }
	.archive-page { padding-top: 48px; }
	.release-entry { grid-template-columns: 1fr; gap: 30px; }
	.events-browser { height: auto; display: block; }
	.events-index { max-height: 52svh; padding: 26px var(--unit) 36px; }
	.events-index header { margin-bottom: 22px; }
	.events-index button { grid-template-columns: 82px minmax(0, 1fr); }
	.event-detail { min-height: 48svh; }
	.event-detail article { padding: 32px var(--unit) 54px; }
	.about-stream section { padding-bottom: 48px; }
	.about-reading { gap: 20px; }
}