1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="How a coastal fantasy map turns tides, trade routes, and bad omens into playable trouble.">
<title>Salt and Star Maps | Sharkk</title>
<link rel="stylesheet" href="../../css/fonts.css">
<link rel="stylesheet" href="../../css/tokens.css">
<link rel="stylesheet" href="../../css/style.css">
</head>
<body>
<div class="container">
<header id="main">
<a id="logo-link" href="../../index.html" aria-label="Sharkk home"></a>
<div class="content">
<nav>
<div class="nav-item">
<a href="../../work/index.html">
Work <svg class="nav-chevron" viewBox="0 0 42 42" aria-hidden="true" focusable="false">
<path d="M20.833,41.574l-20.674,-20.674l-0.159,-20.9l20.88,20.88l20.879,-20.88l-0.159,20.9l-20.674,20.674l-0,0.093l-0.046,-0.047l-0.047,0.047l0,-0.093Z" />
</svg>
</a>
<div class="nav-dropdown work-list">
<div class="link-list current-work">
<a href="../../work/project-1/index.html">Anashti Sul</a>
<a href="../../work/planes-of-power/index.html">Planes of Power</a>
<a href="../../work/ashbringer/index.html">Ashbringer</a>
</div>
<div class="link-list old-work">
<a href="../../work/mad-splash/index.html">Mad Splash</a>
<a href="../../work/battles-for-arthos/index.html">Battles for Arthos</a>
<a href="../../work/legendarium/index.html">Legendarium</a>
</div>
</div>
</div>
<div class="nav-item">
<a href="../index.html">
Blog </a>
</div>
<div class="nav-item">
<a href="../../about/index.html">
About </a>
</div>
</nav>
</div>
</header>
</div>
<div class="container">
<main class="page blog-post-page">
<article class="blog-post">
<div class="cover-card">
<img class="cover" src="../../img/slides/test1.jpg" alt="">
</div>
<header class="post-header">
<h1>Salt and Star Maps</h1>
</header>
<div class="content">
<time datetime="2026-06-02">June 2, 2026</time>
<p class="copy">How a coastal fantasy map turns tides, trade routes, and bad omens into playable trouble.</p>
<p>Every Sharkk map starts with a practical question: what would make travel useful, scary, and just inconvenient enough to become a story?</p>
<p>For Anashti Sul, that means reefs that move, stars that lie, and port cities where every bargain has a little salt in the wound.</p>
<a class="read-more" href="../index.html">Back to Blog</a>
</div>
<section class="comments" aria-label="Comments">
<h2>Comments</h2>
<div class="comment-thread">
<article class="comment">
<div class="avatar" style="--avatar-color: #12AEF5">MR</div>
<div class="bubble">
<header>
<div class="comment-meta">
<strong>Mara</strong>
<span>2 hours ago</span>
</div>
<div class="comment-votes" aria-label="Comment votes">
<button class="vote-up" type="button" aria-label="Upvote Mara's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3v12Zm2 0V10.6l5.4-7.4c.5-.7 1.5-.9 2.2-.4.6.4.9 1.1.7 1.8L16 10h4.2c1.2 0 2.1 1 1.9 2.2l-1.2 7.2A3 3 0 0 1 18 22H9Z" />
</svg>
</button>
<span>12</span>
<button class="vote-down" type="button" aria-label="Downvote Mara's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3V2Zm2 0v11.4l5.4 7.4c.5.7 1.5.9 2.2.4.6-.4.9-1.1.7-1.8L16 14h4.2c1.2 0 2.1-1 1.9-2.2l-1.2-7.2A3 3 0 0 0 18 2H9Z" />
</svg>
</button>
</div>
</header>
<p>This has exactly the right haunted-coast energy. I can already hear the dock bells getting weird.</p>
</div>
</article>
<article class="comment is-right">
<div class="avatar" style="--avatar-color: #7c5cff">JT</div>
<div class="bubble">
<header>
<div class="comment-meta">
<strong>Jett</strong>
<span>1 hour ago</span>
</div>
<div class="comment-votes" aria-label="Comment votes">
<button class="vote-up" type="button" aria-label="Upvote Jett's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3v12Zm2 0V10.6l5.4-7.4c.5-.7 1.5-.9 2.2-.4.6.4.9 1.1.7 1.8L16 10h4.2c1.2 0 2.1 1 1.9 2.2l-1.2 7.2A3 3 0 0 1 18 22H9Z" />
</svg>
</button>
<span>7</span>
<button class="vote-down" type="button" aria-label="Downvote Jett's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3V2Zm2 0v11.4l5.4 7.4c.5.7 1.5.9 2.2.4.6-.4.9-1.1.7-1.8L16 14h4.2c1.2 0 2.1-1 1.9-2.2l-1.2-7.2A3 3 0 0 0 18 2H9Z" />
</svg>
</button>
</div>
</header>
<p>The lore barnacles are load-bearing. Please do not scrape them off.</p>
</div>
</article>
<article class="comment">
<div class="avatar" style="--avatar-color: #ff5c9a">NX</div>
<div class="bubble">
<header>
<div class="comment-meta">
<strong>Nix</strong>
<span>33 minutes ago</span>
</div>
<div class="comment-votes" aria-label="Comment votes">
<button class="vote-up" type="button" aria-label="Upvote Nix's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h3v12Zm2 0V10.6l5.4-7.4c.5-.7 1.5-.9 2.2-.4.6.4.9 1.1.7 1.8L16 10h4.2c1.2 0 2.1 1 1.9 2.2l-1.2 7.2A3 3 0 0 1 18 22H9Z" />
</svg>
</button>
<span>3</span>
<button class="vote-down" type="button" aria-label="Downvote Nix's comment">
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M7 2H4a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h3V2Zm2 0v11.4l5.4 7.4c.5.7 1.5.9 2.2.4.6-.4.9-1.1.7-1.8L16 14h4.2c1.2 0 2.1-1 1.9-2.2l-1.2-7.2A3 3 0 0 0 18 2H9Z" />
</svg>
</button>
</div>
</header>
<p>I want a whole post about the shrine etiquette. What happens if someone brings the wrong fish?</p>
</div>
</article>
</div>
</section>
<section class="markdown-editor" aria-label="Write a comment" data-markdown-editor>
<textarea data-markdown-input rows="1" aria-label="Write a comment" placeholder="Write a Markdown comment: **bold**, *italic*, `code`, # heading, - list, > quote"></textarea>
</section>
</article>
</main>
<footer class="footer">
<div class="brand">
<img src="../../img/sharkmark.svg" alt="" aria-hidden="true">
<p>© 2026 Sharkk. No wipeouts, just waves.</p>
</div>
<nav class="links">
<a href="../../privacy/index.html">Privacy</a>
<a href="../../legal/index.html">Legal</a>
</nav>
</footer>
</div>
<script src="../../js/nav-dropdown.js"></script>
<script src="../../js/blog-index.js"></script>
<script src="../../js/markdown-editor.js"></script>
</body>
</html>