:root {
    --color-bg: #ffffff;
    --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: 'Fredericka the Great', system-ui, sans-serif;
    --font-section: 'Fredericka the Great', system-ui, sans-serif;
    --font-display: 'Bubblegum Sans', 'Fredericka the Great', 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: 400;
    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-display);
    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: 1.17rem;
}

.site-header nav a.section-link {
    font-family: var(--font-section);
    font-weight: 400;
}

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

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

/* Homepage: the page is exactly one viewport tall (svh, so mobile browser
   toolbars never cause overflow) and the image gets whatever height is left
   below the header/intro and above the footer. */
body:has(.hotspot-scroll-container) {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
}

body:has(.hotspot-scroll-container) .site-header,
body:has(.hotspot-scroll-container) footer,
.homepage-intro {
    flex: none;
}

main:has(.hotspot-scroll-container) {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 0;
    padding-bottom: 0;
}

body:has(.hotspot-scroll-container) footer {
    padding: 0.5rem 1.5rem !important;
}

/* Homepage hotspot image — full-bleed so it spans the whole browser width
   even though it's nested inside <main>, which is otherwise width-limited.
   The image is sized to the full height available, keeping its native
   aspect ratio. If that makes it wider than the screen (mobile), this outer
   wrapper scrolls horizontally; if narrower (wide desktop), the image is
   centred with empty space either side. */
.hotspot-scroll-container {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.hotspot-scroll {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

/* 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), and hidden at load if the image isn't
   scrollable at all (e.g. wide desktop windows). */
.scroll-edge-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 56px;
    background: linear-gradient(to right, rgba(255, 255, 255, 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%;
    margin: 0 auto;
    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%;
}

/* Each hotspot glows softly just outside its edge when hovered. The
   #hotspot-glow filter (index.php) replaces the polygon's own paint with a
   halo around it, so the artwork inside stays untouched. The polygon is
   hidden with opacity (which still receives clicks/hover) rather than a
   transparent fill, because the filter needs an opaque shape to work
   from. Keyboard focus lights up every area of the focused link, since
   one link can span several areas. */
.hotspot-wrap svg a polygon {
    fill: #fff;
    filter: url(#hotspot-glow);
    opacity: 0;
    transition: opacity 0.2s ease;
    cursor: pointer;
}

.hotspot-wrap svg a polygon:hover,
.hotspot-wrap svg a:focus-visible polygon {
    opacity: 1;
}

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

/* Menu button: mobile only (see the 700px breakpoint below). */
.menu-toggle {
    display: none;
}

@media (max-width: 699px) {
    .site-header {
        position: relative;
        flex-wrap: nowrap;
    }

    .js .menu-toggle {
        display: inline-block;
        padding: 0.4rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: 999px;
        background: var(--color-surface);
        color: var(--color-text);
        font-family: var(--font-body);
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* The dropdown overlays the page rather than pushing it down, so the
       comic-fitting script's measurements stay valid while it's open. */
    .js .site-header nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 10;
        flex-direction: column;
        padding: 0.5rem 1.25rem 0.75rem;
        background: var(--color-surface);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
    }

    .js .site-header nav.open {
        display: flex;
    }

    .js .site-header nav a {
        margin-left: 0;
        padding: 0.6rem 0;
        font-size: 1.43rem;
    }
}

@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: 1.3rem;
    }

    /* Centred dot separator between nav links. */
    .site-header nav a + a::before {
        content: "\00b7";
        display: inline-block;
        margin-right: 1.25rem;
        font-weight: 700;
        color: var(--color-text-muted);
    }

    .homepage-intro {
        padding: 0.5rem 1.5rem;
    }

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

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

.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;
}

/* On mobile, Pets and People (.fit-window) keeps the whole comic page
   visible without scrolling; other comics show at full width and scroll:
   height-capped to the viewport here as a no-JS fallback, then tightened
   by assets/js/comic.js to the space actually left below the header and
   nav. width/height auto with both max-* set scales it down
   proportionally. Desktop (≥700px) shows the comic at full width instead,
   scrolling if it's tall. */
.comic-strip img {
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 699px) {
    /* Trim the side gutters so the comic gets as much width as possible. */
    main:has(.comic-strip) {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .comic-strip {
        padding: 0.25rem;
    }

    .comic-strip img {
        /* Match the container's inner curve so the corners nest evenly. */
        border-radius: calc(var(--radius) - 0.25rem);
    }

    .comic-strip.fit-window img {
        max-height: calc(100vh - 2.5rem);
        max-height: calc(100svh - 2.5rem);
    }
}

.comic-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    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: 400;
    font-family: var(--font-heading);
    border: none;
    cursor: pointer;
}

/* Comic nav buttons are outlined rather than filled so they don't compete
   with the comic. */
.comic-nav .btn {
    font-family: var(--font-display);
    font-size: 1.3rem;
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.comic-nav .btn:hover {
    background: var(--color-primary);
    color: #fff;
}

.comic-nav .btn.secondary {
    background: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.comic-nav .btn.secondary:hover {
    background: var(--color-secondary);
    color: #fff;
}

.comic-nav .btn.disabled {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

.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;
}

/* Mobile: smaller buttons, always on a single line. */
@media (max-width: 699px) {
    .comic-nav {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }

    .comic-nav .btn {
        padding: 0.4rem 0.7rem;
        font-size: 1rem;
        white-space: nowrap;
    }
}

/* 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);
}

/* Plain text pages (About) */
.text-page {
    max-width: 40em;
    margin: 0 auto;
}

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

.form-box {
    max-width: 560px;
}

.admin-box label,
.form-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,
.form-box input[type="text"],
.form-box input[type="email"],
.form-box textarea {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: 1rem;
}

.form-box textarea {
    resize: vertical;
}

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

/* Browsers default <button> text to ~13.3px; this is 50% larger. */
.admin-box .btn,
.form-box .btn {
    font-size: 1.25rem;
}

/* Contact form spam honeypot: kept off-screen rather than display:none,
   which some bots detect and skip. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.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;
}