:root {
  --bg:#08080a; --ink:#e9e7e3; --dim:#8a8780;
  --line:rgba(255,255,255,.08);
  --tile:rgba(255,255,255,.03);
  --accent:#c9a366;
  --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  --mono: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
html,body { background:var(--bg); color:var(--ink); min-height:100%; }
body {
  font-family: var(--serif);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--ink); text-decoration:none; }

header.top {
  max-width:1200px; margin:0 auto; padding:54px 26px 8px;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:14px 22px;
}
header.top .name {
  font-size:1.4rem; letter-spacing:.01em;
}
header.top nav {
  margin-left:auto;
  font: 600 10.5px/1 var(--mono);
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim);
}
header.top nav a { margin-left:18px; transition:color .15s; }
header.top nav a:hover { color:var(--accent); }
header.top nav a.current { color:var(--accent); }

.hero {
  max-width:1200px; margin:0 auto; padding:48px 26px 64px;
  text-align:center;
}
.hero h1 {
  font-size:2.4rem; font-weight:normal; letter-spacing:.005em;
  margin:0 0 18px; line-height:1.15;
}
.hero p {
  color:var(--dim); font-size:1.05rem; max-width:560px; margin:0 auto;
}

section.work {
  max-width:1200px; margin:0 auto; padding:48px 26px 64px;
  border-top:1px solid var(--line);
}
section.work:first-of-type { border-top:none; padding-top:24px; }

.section-head {
  display:flex; align-items:baseline; gap:18px;
  margin:0 0 32px;
}
.section-head h2 {
  font: 600 11px/1 var(--mono);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent);
}
.section-head .count {
  font: 11px/1 var(--mono); color:var(--dim);
  letter-spacing:.16em;
}
.section-head .rule {
  flex:1; height:1px; background:var(--line);
}

.grid {
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.tile {
  position:relative;
  background:#000;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  aspect-ratio: 1 / 1;
  transition: transform .25s ease, border-color .25s ease;
}
.tile:hover { transform: translateY(-2px); border-color: rgba(201,163,102,.35); }
.tile img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .5s ease;
}
.tile:hover img { transform: scale(1.04); }
.tile .cap {
  position:absolute; left:0; right:0; bottom:0;
  padding:8px 12px;
  font: 11px/1.3 var(--mono);
  letter-spacing:.04em; color:var(--ink);
  background: linear-gradient(transparent, rgba(0,0,0,.85));
  opacity:0; transition: opacity .2s ease;
  pointer-events:none;
}
.tile:hover .cap { opacity:1; }

.grid.tall .tile { aspect-ratio: 3 / 4; }

.tracks {
  display:flex; flex-direction:column; gap:14px;
  max-width:760px; margin:0 auto;
}
.track {
  background:var(--tile);
  border:1px solid var(--line);
  border-radius:2px;
  padding:18px 20px;
  display:flex; flex-direction:column; gap:12px;
}
.track .meta {
  display:flex; align-items:baseline; gap:14px;
}
.track .meta .title {
  font-size:1.1rem;
}
.track .meta .dur {
  margin-left:auto;
  font: 11px/1 var(--mono); color:var(--dim);
  letter-spacing:.14em;
}
.track audio {
  width:100%;
  height:36px;
}
audio { color-scheme: dark; }

.videos {
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.vid {
  background:#000;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
}
.vid video {
  display:block; width:100%; height:auto;
  background:#000;
}
.vid .cap {
  padding:10px 14px;
  font: 11px/1.3 var(--mono);
  letter-spacing:.06em; color:var(--dim);
  border-top:1px solid var(--line);
}

.apps {
  display:grid; gap:18px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.app {
  background:var(--tile);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  display:flex; flex-direction:column;
  transition: transform .25s ease, border-color .25s ease;
  color:var(--ink);
}
.app:hover {
  transform: translateY(-2px);
  border-color: rgba(201,163,102,.4);
}
.app .app-title {
  padding: 18px 20px 4px;
  font: 600 13px/1.2 var(--mono);
  letter-spacing:.18em; color:var(--accent);
  text-transform:lowercase;
}
.app .app-desc {
  padding: 0 20px 8px;
  font-family: var(--serif); font-size:0.95rem; color:var(--ink);
  line-height:1.5;
}
.app .app-tags {
  padding: 0 20px 18px;
  margin-top:auto;
  font: 10px/1.4 var(--mono);
  letter-spacing:.14em; color:var(--dim);
  text-transform:uppercase;
}
.app .app-downloads {
  display:flex; flex-wrap:wrap; gap:8px;
  padding: 0 20px 18px;
}
.app .app-downloads a {
  flex:1 1 0; min-width:120px;
  text-align:center;
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  font: 600 11px/1 var(--mono);
  letter-spacing:.14em; color:var(--accent);
  text-transform:lowercase;
  transition: border-color .2s ease, background .2s ease;
}
.app .app-downloads a:hover {
  border-color: rgba(201,163,102,.55);
  background: rgba(201,163,102,.06);
}

.events {
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column; gap:2px;
}
.event {
  display:grid;
  grid-template-columns: 130px 1fr 200px;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:start;
}
.event .date {
  font: 11px/1 var(--mono);
  letter-spacing:.16em; color:var(--accent);
  text-transform:uppercase;
}
.event .what .title { font-size:1.08rem; }
.event .what .desc { color:var(--dim); font-size:.95rem; margin-top:4px; }
.event .where {
  font: 11px/1.3 var(--mono);
  letter-spacing:.12em; color:var(--dim);
  text-transform:uppercase; text-align:right;
}
.events .placeholder {
  color:var(--dim); font-style:italic;
  padding:24px 0; text-align:center;
}

.hub {
  max-width:1200px; margin:0 auto; padding:24px 26px 64px;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.hub a {
  background:var(--tile);
  border:1px solid var(--line);
  border-radius:2px;
  padding:42px 24px 36px;
  display:flex; flex-direction:column; gap:8px;
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  min-height:160px;
}
.hub a:hover {
  transform: translateY(-2px);
  border-color: rgba(201,163,102,.35);
  background: rgba(201,163,102,.04);
}
.hub a .hub-title {
  font: 600 12px/1 var(--mono);
  letter-spacing:.32em; text-transform:uppercase;
  color:var(--accent);
}
.hub a .hub-sub {
  font: 11px/1.4 var(--mono);
  letter-spacing:.16em; color:var(--dim);
  text-transform:uppercase;
}
.hub a .hub-flavor {
  margin-top:auto;
  font-family: var(--serif); font-size:.95rem;
  color:var(--ink); opacity:.85;
}

footer.foot {
  max-width:1200px; margin:0 auto; padding:64px 26px 80px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 22px; align-items:baseline;
  font: 11px/1 var(--mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim);
}
footer.foot a { color:var(--dim); transition:color .15s; }
footer.foot a:hover { color:var(--accent); }
footer.foot .sp { margin-left:auto; }

@media (max-width:560px) {
  header.top { padding:36px 18px 4px; }
  header.top .name { font-size:1.2rem; }
  header.top nav { width:100%; margin-left:0; }
  header.top nav a:first-child { margin-left:0; }
  .hero { padding:32px 18px 40px; }
  .hero h1 { font-size:1.8rem; }
  section.work { padding:36px 18px 48px; }
  .hub { padding:0 18px 48px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:10px; }
  .event { grid-template-columns: 88px 1fr; }
  .event .where { grid-column:1 / -1; text-align:left; }
  footer.foot { padding:48px 18px 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero, section.work, footer.foot, .hub a {
    animation: rise 700ms cubic-bezier(.2,.7,.2,1) backwards;
  }
  .hero               { animation-delay: 120ms; }
  section.work        { animation-delay: 320ms; }
  .hub a:nth-child(1) { animation-delay: 220ms; }
  .hub a:nth-child(2) { animation-delay: 320ms; }
  .hub a:nth-child(3) { animation-delay: 420ms; }
  .hub a:nth-child(4) { animation-delay: 520ms; }
  .hub a:nth-child(5) { animation-delay: 620ms; }
  footer.foot         { animation-delay: 720ms; }
}
@keyframes rise {
  from { opacity:0; transform: translateY(10px); }
  to   { opacity:1; transform: translateY(0); }
}


:root { --cx: -9999px; --cy: -9999px; --scroll: 0; --found: 0; }
body::before {
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: radial-gradient(
    360px circle at var(--cx) var(--cy),
    rgba(201,163,102,.08),
    rgba(201,163,102,.03) 40%,
    transparent 70%
  );
  z-index:0;
  opacity:0;
  transition: opacity .6s ease;
}
html.cursor-on body::before { opacity:1; }
@media (prefers-reduced-motion: reduce) {
  html.cursor-on body::before { opacity:0; }
}
header.top, .hero, section, .hub, footer.foot, main { position:relative; z-index:1; }

.masthead {
  position:relative;
  max-width:1200px;
  margin:0 auto;
  padding:24px 26px 0;
  aspect-ratio: 21 / 9;
  overflow:hidden;
}
.masthead-img {
  position:absolute;
  inset:24px 26px 0 26px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  border:1px solid var(--line);
  border-radius:2px;
  transform: translate3d(0, calc(var(--scroll) * -0.08px), 0) scale(1.04);
  transition: transform 120ms linear;
  will-change: transform;
}
.masthead-veil {
  position:absolute;
  inset:24px 26px 0 26px;
  background: linear-gradient(
    180deg,
    rgba(8,8,10,.10) 0%,
    rgba(8,8,10,.55) 80%,
    rgba(8,8,10,.95) 100%
  );
  border-radius:2px;
  pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  .masthead-img { transform:none; }
}
@media (max-width:560px) {
  .masthead { padding:18px 18px 0; aspect-ratio: 16 / 10; }
  .masthead-img, .masthead-veil { inset:18px 18px 0 18px; }
}

body.home {
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(8,8,10,0.7) 0%, rgba(8,8,10,0) 100%),
    url('/images/two-communities.webp');
  background-size: 100% 600px, 100% auto;
  background-position: top, top;
  background-repeat: no-repeat, no-repeat;
  background-attachment: scroll, scroll;
  min-height: calc(100vw * 1.928);
  display: flex;
  flex-direction: column;
}
body.home footer.foot {
  margin-top: auto;
}

.divider-strip {
  max-width:1200px;
  margin:0 auto;
  padding:0 26px 64px;
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
}
.divider-tile {
  position:relative;
  display:block;
  background:#000;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  transition: transform .25s ease, border-color .25s ease;
}
.divider-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(201,163,102,.35);
}
.divider-tile img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .6s ease, opacity .25s ease;
  opacity:.85;
}
.divider-tile:hover img { transform: scale(1.03); opacity:1; }
.divider-cap {
  position:absolute; left:14px; bottom:12px;
  font: 11px/1 var(--mono);
  letter-spacing:.22em; color:var(--ink);
  text-transform:uppercase;
  background: rgba(8,8,10,.6);
  padding:6px 10px; border-radius:2px;
  opacity:0; transition: opacity .25s ease;
  pointer-events:none;
}
.divider-tile:hover .divider-cap { opacity:1; }
@media (max-width:560px) {
  .divider-strip { padding:0 18px 48px; }
}

.comic-strip {
  display:grid;
  gap:18px;
  grid-template-columns: 1fr;
  max-width:880px;
  margin:0 auto;
}
.strip-panel {
  position:relative;
  display:block;
  background:#000;
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.strip-panel:hover {
  transform: translateY(-2px);
  border-color: rgba(201,163,102,.35);
}
.strip-panel img {
  width:100%; height:auto; display:block;
}
.strip-mark {
  position:absolute; top:10px; right:14px;
  font: 600 11px/1 var(--mono);
  letter-spacing:.32em; color:var(--accent);
  background: rgba(8,8,10,.7);
  padding:6px 8px; border-radius:2px;
  text-transform:lowercase;
}

.app .app-glyph {
  width:100%;
  aspect-ratio: 1 / 1;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--dim);
  font: 600 96px/1 var(--mono);
  text-transform:uppercase;
  overflow:hidden;
  transition: background .25s ease, color .25s ease;
}
.app .app-glyph svg { width:64px; height:64px; display:block; }
.app .app-glyph img { width:100%; height:100%; object-fit:cover; display:block; }
.app:hover .app-glyph { color: var(--accent); }

.detail-icon {
  width:80px; height:80px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--dim);
  font: 600 30px/1 var(--mono);
  text-transform:uppercase;
  overflow:hidden;
  flex:none;
}
.detail-icon img { width:100%; height:100%; object-fit:cover; display:block; }
.detail-icon svg { width:36px; height:36px; display:block; }

.coming-soon {
  padding:100px 24px 80px;
  text-align:center;
  color:var(--dim);
  font: italic 1.2rem var(--serif);
}

.markdown-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px 0;
  border-radius: 4px;
}

.markdown-body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  word-wrap: break-word;
}
.markdown-body > *:first-child { margin-top: 0; }
.markdown-body > *:last-child { margin-bottom: 0; }
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 1.3;
  margin: 1.8em 0 .7em;
}
.markdown-body h1 { font-size: 1.55rem; }
.markdown-body h2 {
  font-size: 1.22rem;
  padding-bottom: .35em;
  border-bottom: 1px solid var(--line);
}
.markdown-body h3 { font-size: 1.04rem; color: var(--accent); }
.markdown-body h4 { font-size: .95rem; color: var(--dim); }
.markdown-body p { margin: 0 0 1.1em; }
.markdown-body a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
.markdown-body a:hover { border-bottom-color: var(--accent); }
.markdown-body ul,
.markdown-body ol { margin: 0 0 1.1em; padding-left: 1.6em; }
.markdown-body li { margin: .3em 0; }
.markdown-body li::marker { color: var(--accent); }
.markdown-body code {
  font-family: var(--mono);
  font-size: .85em;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .12em .4em;
  color: #e6c98a;
}
.markdown-body pre {
  margin: 0 0 1.2em;
  padding: 16px 18px;
  background: #0c0c12;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.55;
}
.markdown-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: .85rem;
  color: var(--ink);
}
.markdown-body pre code.hljs { background: transparent; padding: 0; }
.markdown-body blockquote {
  margin: 0 0 1.2em;
  padding: .2em 1em;
  color: var(--dim);
  border-left: 3px solid var(--accent);
  font-style: italic;
}
.markdown-body blockquote p { margin: .4em 0; }
.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: .92rem;
}
.markdown-body th,
.markdown-body td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
}
.markdown-body th { background: rgba(255,255,255,.04); font-family: var(--mono); font-weight: 600; }
.markdown-body hr { border: 0; border-top: 1px solid var(--line); margin: 1.8em 0; }
.markdown-body strong { color: #fff; }

.track-aside {
  margin-top:18px;
  font-family: var(--serif);
  font-size:.98rem; color:var(--dim);
  line-height:1.55;
  text-align:center;
}

.trace {
  display:flex;
  gap:8px;
  align-items:center;
  opacity:0;
  transition: opacity .6s ease;
  min-height:14px;
}
.trace.trace-on { opacity:.7; }
.trace.trace-on:hover { opacity:1; }
.trace-mark {
  display:inline-flex;
  width:14px; height:14px;
  color:var(--dim);
  transition: color .25s ease, transform .25s ease;
}
.trace-mark svg { width:100%; height:100%; display:block; }
.trace-mark:hover { color:var(--accent); transform: translateY(-1px); }
footer.foot .sp { margin-left:auto; }
footer.foot .trace { margin-left:0; }