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="A tiny lore pass on holy predators, reef taboos, and the difference between worship and negotiation.">
<title>Why the Sharks Have Temples | 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/works/testheader1.jpg" alt="">
</div>
<header class="post-header">
<h1>Why the Sharks Have Temples</h1>
</header>
<div class="content">
<time datetime="2026-04-12">April 12, 2026</time>
<p class="copy">A tiny lore pass on holy predators, reef taboos, and the difference between worship and negotiation.</p>
<p>The shark temples are less about obedience and more about etiquette. You do not pray because the sea is kind; you pray because the sea has rules.</p>
<p>That makes every shrine a social contract, every offering a warning, and every priest a diplomat with very sharp constituents.</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>