<?php /** @var string $content; @var string $title */ ?>
<!DOCTYPE html>
<html lang="<?= e(locale()) ?>">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= e($title ?: '') ?> · Mystic Art Tattoo</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com"></script>
  <script>tailwind.config = { theme: { extend: { colors: { ink: '#0a0a0a', slate: '#111113', bone: '#f5f5f2', gold: '#d4af37' }, fontFamily: { sans: ['Inter','system-ui','sans-serif'], display: ['Playfair Display','serif'] } } } };</script>
  <link rel="stylesheet" href="<?= asset('css/site.css') ?>">
  <script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
</head>
<body class="bg-ink text-bone font-sans antialiased min-h-screen flex items-center justify-center">
  <?php if ($f = flash()): foreach ($f as $k => $msg): ?>
    <div class="fixed top-6 right-6 rounded-md px-4 py-3 text-sm <?= $k === 'error' ? 'bg-red-500/10 text-red-300 border border-red-500/30' : 'bg-gold/10 text-gold border border-gold/30' ?>">
      <?= e($msg) ?>
    </div>
  <?php endforeach; endif; ?>
  <?= $content ?>
</body>
</html>
