:root {
    --color-bg: #fff8ec;
    --color-surface: #ffffff;
    --color-text: #332b22;
    --color-text-muted: #7a6f61;
    --color-primary: #ff6b4a;
    --color-primary-dark: #e8563a;
    --color-secondary: #2fb8ac;
    --color-border: #f0e2cf;
    --radius: 16px;
    --font-heading: 'Baloo 2', system-ui, sans-serif;
    --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: 1.5;
    overflow-x: hidden;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin: 0 0 0.5em;
}

a {
    color: var(--color-primary-dark);
}

img {
    max-width: 100%;
    display: block;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 0.35rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.site-header a.logo {
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--color-primary-dark);
    text-decoration: none;
}

.site-header nav a {
    margin-left: 0.85rem;
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.site-header nav a:hover {
    color: var(--color-primary-dark);
}

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

/* Homepage hotspot image — full-bleed so it spans the whole browser width
   even though it's nested inside <main>, which is otherwise width-limited.
   On narrow screens the image is sized to its full height so it's all
   visible without vertical scrolling, keeping its native aspect ratio,
   and this outer wrapper scrolls horizontally for the rest of its width. */
.hotspot-scroll-container {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hotspot-scroll {
    width: 100%;
    height: 70vh;
    overflow-x: auto;
}

/* Hints that the image continues off-screen on mobile. Faded out by JS
   once the user has scrolled far enough that there's nothing left to hint
   at (see assets/js/homepage.js). Hidden outright on desktop, where the
   image isn't scrollable. */
.scroll-edge-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    background: linear-gradient(to right, rgba(255, 248, 236, 0), var(--color-bg));
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    font-size: 1.3rem;
    color: var(--color-text-muted);
}

.hotspot-wrap {
    position: relative;
    width: max-content;
    height: 100%;
    line-height: 0;
}

.hotspot-wrap img {
    display: block;
    width: auto;
    max-width: none;
    height: 100%;
}

.hotspot-wrap svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hotspot-wrap svg a > shape,
.hotspot-wrap svg a rect,
.hotspot-wrap svg a polygon {
    fill: rgba(255, 255, 255, 0);
    transition: fill 0.15s ease;
    cursor: pointer;
}

.hotspot-wrap svg a:hover rect,
.hotspot-wrap svg a:hover polygon,
.hotspot-wrap svg a:focus rect,
.hotspot-wrap svg a:focus polygon {
    fill: rgba(255, 107, 74, 0.18);
}

.hotspot-wrap svg a:focus {
    outline: none;
}

@media (min-width: 700px) {
    .site-header {
        flex-wrap: nowrap;
        padding: 1rem 1.5rem;
    }

    .site-header a.logo {
        font-size: 1.5rem;
    }

    .site-header nav a {
        margin-left: 1.25rem;
        font-size: 1rem;
    }

    .hotspot-scroll {
        height: auto;
        overflow-x: visible;
    }

    .scroll-edge-fade {
        display: none;
    }

    .hotspot-wrap {
        width: 100%;
        height: auto;
    }

    .hotspot-wrap img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .homepage-intro {
        padding: 2rem 1.5rem 0;
    }

    .homepage-intro h1 {
        font-size: 2rem;
    }

    .homepage-intro p {
        font-size: 1rem;
    }
}

.homepage-intro {
    text-align: center;
    padding: 0.5rem 1rem 0;
}

.homepage-intro h1 {
    font-size: 1.6rem;
}

.homepage-intro p {
    color: var(--color-text-muted);
    max-width: 40em;
    margin: 0 auto;
    font-size: 0.8rem;
}

/* Comic page */
.comic-page-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.comic-page-header .page-title {
    color: var(--color-text-muted);
    font-weight: 600;
}

.comic-strip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
}

.comic-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.btn {
    display: inline-block;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-family: var(--font-heading);
    border: none;
    cursor: pointer;
}

.btn:hover {
    background: var(--color-primary-dark);
}

.btn.secondary {
    background: var(--color-secondary);
}

.btn[disabled],
.btn.disabled {
    background: var(--color-border);
    color: var(--color-text-muted);
    pointer-events: none;
}

.comic-nav-center {
    flex: 1;
    text-align: center;
}

/* Archive */
.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.archive-grid a {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
}

.archive-grid img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    width: 100%;
}

.archive-grid .archive-caption {
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Comic index / listing */
.comic-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.5rem;
}

.comic-list .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: var(--color-text);
    text-align: center;
}

.comic-list .card h2 {
    color: var(--color-primary-dark);
}

/* Admin */
.admin-box {
    max-width: 480px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 2rem;
}

.admin-box label {
    display: block;
    font-weight: 600;
    margin: 1rem 0 0.35rem;
}

.admin-box input[type="text"],
.admin-box input[type="password"],
.admin-box input[type="file"],
.admin-box select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
}

.admin-box .btn {
    margin-top: 1.5rem;
    width: 100%;
}

.flash {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 600;
}

.flash.success {
    background: #e3f6ee;
    color: #1c7a5e;
}

.flash.error {
    background: #fdeceb;
    color: #b8402a;
}

.admin-page-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}

.admin-page-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

.admin-page-list form {
    display: inline;
}

.link-danger {
    color: #b8402a;
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 600;
    text-decoration: underline;
    font-family: var(--font-body);
    font-size: 0.9rem;
}