/* --- Global Styles --- */
body {
    background: linear-gradient(135deg, #fffaf6 0%, #f6f1eb 100%);
    color: #56423b;
    font-family: 'Quicksand', 'Comic Neue', Arial, sans-serif;
    font-size: 1.08rem;
    letter-spacing: 0.01em;
}

/* --- Typography --- */
.font-serif {
    font-family: 'Comic Neue', cursive;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.font-sans {
    font-family: 'Quicksand', 'Comic Neue', Arial, sans-serif;
}

/* --- Prose Styling --- */
.prose p, .prose li {
    line-height: 1.85;
    margin-bottom: 1.5em;
    font-size: 1.13rem;
    color: #6e4d3c;
}

.prose h1 {
    font-family: 'Comic Neue', cursive;
    font-size: 2.7rem;
    color: #e78c3f;
    margin-bottom: 0.7em;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.01em;
    border-bottom: 4px dotted #f0c36d;
    padding-bottom: 0.3em;
    background: linear-gradient(90deg, #fff1c1 60%, transparent 100%);
    border-radius: 1.2em 1.2em 0 0;
}

.prose h2 {
    font-family: 'Quicksand', sans-serif;
    font-size: 2rem;
    line-height: 1.2;
    margin-top: 3em;
    margin-bottom: 1.2em;
    color: #e78c3f;
    font-weight: 700;
    text-align: left;
    position: relative;
    padding-left: 1.7em;
}

.prose h2::before {
    content: '🐾';
    position: absolute;
    left: 0;
    top: 0.05em;
    font-size: 1.3em;
}

.prose h3 {
    font-family: 'Comic Neue', cursive;
    font-size: 1.35rem;
    margin-top: 2em;
    margin-bottom: 0.7em;
    color: #a46b4c;
    font-weight: 700;
    border-left: 5px solid #f0c36d;
    padding-left: 0.7em;
    letter-spacing: 0.02em;
    background: #fff5e1;
    border-radius: 0 1em 1em 0;
}

.prose ul, .prose ol {
    padding-left: 2em;
    margin-bottom: 1.2em;
    list-style-type: '🐶 ';
}

.prose li {
    padding-left: 0.5em;
    margin-bottom: 0.5em;
}

.prose a {
    color: #e78c3f;
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;
}

.prose a:hover {
    color: #a46b4c;
    background: #fff1c1;
    border-radius: 3px;
    text-decoration: none;
}

.prose img {
    margin: 2em 0;
    border-radius: 1.2rem;
    max-width: 100%;
    height: auto;
    box-shadow: 0 8px 24px rgba(231, 140, 63, 0.10);
    border: 3px solid #f0c36d;
}

.prose blockquote {
    border-left: 8px solid #e78c3f;
    padding: 1.5em 2em;
    margin: 2em 0;
    font-style: italic;
    color: #6e4d3c;
    background: #fff5e1;
    border-radius: 1.2em;
    box-shadow: 0 2px 8px rgba(231, 140, 63, 0.08);
    text-align: left;
}

.prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 2em 0;
    border-radius: 1em;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(231, 140, 63, 0.10);
}

.prose th, .prose td {
    border: 1px solid #ffe3b0;
    padding: 1em 1.3em;
    text-align: left;
    background: #fff;
}

.prose th {
    background: #fff1c1;
    color: #a46b4c;
    font-weight: 700;
    font-family: 'Quicksand', sans-serif;
}

/* --- Header & Navigation --- */
header {
    background: #fff5e1;
    box-shadow: 0 2px 16px rgba(231, 140, 63, 0.08);
    border-bottom: 3px dotted #e78c3f;
}

header .text-indigo-600 {
    color: #e78c3f;
}

header a.text-slate-800 {
    color: #a46b4c;
    font-family: 'Comic Neue', cursive;
    font-weight: 800;
    letter-spacing: 0.04em;
}

header .text-slate-600 {
    color: #6e4d3c;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}

header .text-slate-600:hover {
    color: #e78c3f;
}

header .bg-indigo-600 {
    background: #e78c3f;
    border-radius: 1.2em;
    font-weight: 700;
    color: #fff;
    box-shadow: 0 2px 8px rgba(231, 140, 63, 0.12);
}

header .hover\:bg-indigo-700:hover {
    background: #a46b4c;
    color: #fff1c1;
    transform: scale(1.04);
}

/* --- Footer --- */
footer {
    background: #a46b4c;
    color: #fff1c1;
    border-top: 3px dotted #e78c3f;
}

footer .text-indigo-400 {
    color: #f0c36d;
}

footer a:hover {
    color: #a46b4c;
    background: #f0c36d;
    border-radius: 2px;
    padding: 0 0.3em;
    transition: background 0.2s, color 0.2s;
}