refactor: replace harsh shadows with subtle ring+shadow, add heading-serif and border-hairline

templates/anime.gohtml

@@ -98,7 +98,7 @@
 <div class="flex w-full flex-col gap-10 lg:pr-80">
   <div class="flex flex-col gap-8 md:flex-row lg:gap-12">
     <div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
-      <div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-lg">
+      <div class="aspect-2/3 w-full overflow-hidden border-hairline bg-background-surface shadow-soft">
         {{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
         {{if $anime.Images.Webp.LargeImageURL}}
           {{$imageUrl = $anime.Images.Webp.LargeImageURL}}
@@ -111,7 +111,7 @@
 
     <div class="flex grow flex-col">
       <div class="mb-4">
-        <h1 class="text-2xl font-normal text-foreground md:text-4xl">
+        <h1 class="heading-serif text-2xl font-normal text-foreground md:text-4xl">
           {{$anime.DisplayTitle}}
         </h1>
         {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
@@ -344,7 +344,7 @@
 </div>
 
 <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
-  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border">
+  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border">
     <div class="flex items-center justify-between border-b border-border px-6 py-4">
       <h2 class="text-base font-normal text-foreground">Theme Songs</h2>
       <button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted ring-1 ring-border transition-colors hover:text-foreground">Close</button>
@@ -380,4 +380,4 @@
 })();
 </script>
 
-{{end}}
+{{end}}