/* News Cycle by Nathan Willis, SIL Open Font License (see /fonts/OFL.txt) */
@font-face {
    font-family: "News Cycle";                              /* the name you'll use it by */
    src: url("/fonts/NewsCycle-Regular.woff") format("woff");
    font-weight: 400;                                       /* 400 = normal */
    font-style: normal;
    font-display: swap;                                     /* show text right away, swap font in when loaded */
}

@font-face {
    font-family: "News Cycle";                              /* same name... */
    src: url("/fonts/NewsCycle-Bold.woff") format("woff");
    font-weight: 700;                                       /* ...but 700 = bold */
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. Base Page Styling (Dark Theme)
   ========================================================================== */
body {
    font-family: "News Cycle", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    background-color: #0d0e12;  /* Deep rich off-black background */
    color: #e2e8f0;             /* Crisp light slate body text */
}

/* Headings in vibrant cyan blue for high contrast */
h1, h2, h3 {
    color: #38bdf8;             /* Bright cyan blue accent */
    letter-spacing: -0.5px;
}

/* Subtitle and paragraph text */
.header-brand .bio,
section p {
    color: #94a3b8;             /* Muted cool gray for subtext */
}

/* ==========================================================================
   2. Header & Top Navigation Bar
   ========================================================================== */
.site-header {
    text-align: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #1e293b; /* Dark subtle divider line */
}

.header-brand h1 {
    font-size: 2.2rem;
    margin: 0 0 0.25rem 0;
    color: #38bdf8;
}

.header-brand .bio {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

/* Flexbox container for navbar links */
.navbar {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Dark Mode Navigation Pill Buttons */
.navbar a,
.navbar a:visited,
.navbar a:link {
    text-decoration: none !important;
    color: #38bdf8 !important;              /* Cyan text */
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 22px;
    border: 2px solid #1e293b;              /* Dark border */
    border-radius: 25px;
    background-color: #161822;              /* Dark button surface */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    display: inline-block;
}

/* Hover State */
.navbar a:hover {
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.3); /* Cyan glow */
}

/* Active Selected Tab State */
.navbar a.active,
.navbar a.active:visited {
    background-color: #38bdf8 !important;
    color: #0d0e12 !important;               /* Dark text on active bright pill */
    border-color: #38bdf8 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   3. Tab & Filter Controls
   ========================================================================== */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Filter buttons */
.filter-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-grid;
    place-items: center;
    background-color: #161822;
    color: #38bdf8;
    border: 1px solid #1e293b;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 4px 15px 4px;
    transition: all 0.2s ease;
}

.filter-btn svg {
    width: 20px;
    height: 20px;
    fill: none;                           /* outline icons: no fill... */
    stroke: currentColor;                 /* ...just lines, in the button's text color */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;               /* soft corners where lines meet */
}

.filter-btn:hover,
.filter-btn.active {
    background-color: #38bdf8;
    color: #0d0e12;
    border-color: #38bdf8;
}

/* ==========================================================================
   4. Standalone Image Styling
   ========================================================================== */
/* Scopes standalone images in main content without affecting gallery/modal */
main > img {
    max-width: 300px;
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1rem auto;
}

/* ==========================================================================
   5. Gallery & Card Grid Layout
   ========================================================================== */
.photo-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 20px 0;
}

.photo-card {
    width: min(300px, 100%);     /* shrinks on narrow phones instead of overflowing */
    aspect-ratio: 1 / 1;         /* stays square at any width */
    overflow: hidden;
    border-radius: 12px;
    background-color: #161822;
    border: 1px solid #1e293b;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.photo-item {
    width: min(300px, 100%);
}

.photo-card:hover,
.photo-card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.7);
    border-color: #38bdf8;
}

.photo-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
    margin: 0 !important;
}

/* ==========================================================================
   6. Lightbox / Modal Styles
   ========================================================================== */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1000;
    background-color: rgba(13, 14, 18, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    justify-content: center;
    align-items: center;
}

.lightbox.active {
    display: flex;
}

.lightbox-img {
    max-width: 85vw !important;
    max-height: 85vh !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
    margin: auto;
    display: block;
}

.lightbox-close {
    /* Reset default <button> styling so it looks like the old × */
    background: none;
    border: none;
    padding: 0 8px;
    line-height: 1;
    font-family: inherit;
    position: absolute;
    top: 20px;
    right: 35px;
    color: #ffffff;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    user-select: none;
}

.lightbox-close:hover {
    color: #38bdf8;
}

/* ==========================================================================
   Substack Feed Styles
   ========================================================================== */
.writing-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 800px;
    margin: 20px auto 0 auto;
}

.writing-card {
    background-color: #161822;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.writing-card:hover {
    border-color: #38bdf8;
    transform: translateY(-2px);
}

.post-date {
    font-size: 0.8rem;
    color: #94a3b8;             /* was #64748b: too low contrast on the card background */
    font-weight: 600;
    text-transform: uppercase;
}

.writing-card h3 {
    margin: 6px 0 10px 0;
}

.writing-card h3 a {
    color: #38bdf8;
    text-decoration: none;
}

.writing-card p {
    color: #94a3b8;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.read-more {
    color: #38bdf8;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

.read-more:hover {
    text-decoration: underline;
}

/* ==========================================================================
   GitHub Feed Styles
   ========================================================================== */
.github-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.github-card {
    background-color: #161822;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.github-card:hover {
    transform: translateY(-3px);
    border-color: #38bdf8;
}

.repo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.repo-header h3 {
    margin: 0;
    font-size: 1.1rem;
}

.repo-header h3 a {
    color: #38bdf8;
    text-decoration: none;
}

.repo-lang {
    font-size: 0.75rem;
    background-color: #1e293b;
    color: #94a3b8;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.github-card p {
    color: #94a3b8;
    font-size: 0.9rem;
    flex-grow: 1;
    margin-bottom: 15px;
}

.repo-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: #94a3b8;             /* was #64748b: too low contrast */
    border-top: 1px solid #1e293b;
    padding-top: 10px;
}

.repo-link {
    color: #38bdf8;
    text-decoration: none;
    font-weight: 600;
}

.repo-link:hover {
    text-decoration: underline;
}
/* ==========================================================================
   Accessibility: keyboard focus & reduced motion
   ========================================================================== */
/* Visible focus ring for keyboard users (mouse clicks don't trigger it) */
a:focus-visible,
button:focus-visible,
.navbar a:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}

/* Thumbnails sit inside overflow:hidden, so draw the ring on the card instead */
.photo-card img:focus-visible {
    outline: none;
}
.photo-card:has(img:focus-visible) {
    outline: 2px solid #38bdf8;
    outline-offset: 3px;
}

/* Respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;   /* jump straight to the end */
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Footer: copyright on the left, signature in the right corner */
.site-footer {
    margin-top: 4rem;
    padding: 1.5rem 0 1rem 0;
    border-top: 1px solid #1e293b;   /* same divider as the header */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.footer-note {
    color: #94a3b8;
    font-size: 0.8rem;
    margin: 0;
}

.signature {
    width: 100px;
    height: auto;
    opacity: 0.5;
    user-select: none;
    -webkit-user-drag: none;
    transition: opacity 0.2s ease;
}

.signature:hover {
    opacity: 0.85;   /* brightens slightly on hover */
}

/* ===== Mouth button (placeholder) ===== */
.mouth {
     touch-action: none;                   /* a finger on the mouth drags it instead of scrolling the page */
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;          /* no "save image" pop-up on long-press (iPhone) */
    position: fixed;
    left: 16px;
    top: calc(50% - 46px);                /* fixed top edge, so the box grows downward like a jaw */
    height: 70px;                         /* closed: just the closed drawing (54px) + padding (16px) */
    overflow: hidden;                     /* hide the empty bottom of the canvas */
    align-content: start;                 /* pin the drawings to the top of the window */         /* centers it vertically on the left edge */
    z-index: 2100;                        /* above the menu, so it can also close it */
    width: 72px;
    padding: 8px;
    display: grid;                        /* lets the two drawings share one spot */
    border: 0;
    border-radius: 18px;
    background: rgba(22, 24, 34, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    cursor: pointer;
        transition:
        scale 0.2s cubic-bezier(.175, .885, .32, 1.275),
        height 0.25s cubic-bezier(.175, .885, .32, 1.275);   /* springy jaw drop */
}

.mouth:hover {
    scale: 1.08;                          /* separate from transform, so centering isn't lost */
}

/* Both drawings in the same grid cell = stacked on top of each other */
.mouth img {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

/* Closed by default... */
.mouth .mouth-open { opacity: 0; }

/* ...open while the menu is open */
.mouth[aria-expanded="true"] .mouth-closed { opacity: 0; }
.mouth[aria-expanded="true"] .mouth-open   { opacity: 1; }
.mouth[aria-expanded="true"] {
    height: 92px;                         /* open: the full drawing (76px) + padding (16px) */
}
/* Hover: peek open without opening the menu (devices with a real mouse only) */
@media (hover: hover) {
    .mouth:hover .mouth-closed { opacity: 0; }
    .mouth:hover .mouth-open   { opacity: 1; }
     .mouth:hover               { height: 92px; }
}

/* The "toot": squash and stretch when it opens */
.mouth[aria-expanded="true"] {
    animation: mouth-toot 0.45s ease-out;
}

@keyframes mouth-toot {
    0%   { scale: 1; }
    30%  { scale: 1.15 0.85; }            /* wide and short: squeezing */
    60%  { scale: 0.92 1.08; }            /* narrow and tall: rebounding */
    100% { scale: 1; }
}
/* ===== Puff menu overlay ===== */
.puff-menu {
    position: fixed;
    inset: 0;                             /* shorthand for top/right/bottom/left: 0 = cover the screen */
    z-index: 2000;
    display: grid;
    place-items: center;                  /* centers the sun/moon both ways */
    background: rgba(13, 14, 18, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.puff-menu[hidden] {
    display: none;                        /* needed! see the note below */
}

/* The sun / moon */
.celestial {
    position: relative;
    width: min(55vmin, 340px);
    aspect-ratio: 1;                      /* always a perfect square -> perfect circle */
    display: grid;
    place-items: center;
}

.celestial-body {
    position: absolute;
    inset: 36%;
    border-radius: 50%;
}

.celestial.is-sun .celestial-body {
    background: radial-gradient(circle at 40% 35%, #fff3b0, #fbbf24 55%, #f59e0b);
    box-shadow: 0 0 60px 20px rgba(251, 191, 36, 0.45),
                0 0 140px 60px rgba(251, 191, 36, 0.15);      /* two glows: tight + wide */
}

.celestial.is-moon .celestial-body {
    background:
        radial-gradient(circle at 30% 60%, rgba(100, 116, 139, 0.35) 0 8%, transparent 9%),   /* crater */
        radial-gradient(circle at 65% 30%, rgba(100, 116, 139, 0.3) 0 6%, transparent 7%),    /* crater */
        radial-gradient(circle at 70% 70%, rgba(100, 116, 139, 0.25) 0 4%, transparent 5%),   /* crater */
        radial-gradient(circle at 35% 30%, #f8fafc, #cbd5e1 60%, #94a3b8);                    /* the moon */
    box-shadow: 0 0 60px 10px rgba(203, 213, 225, 0.35);
}


/* Links arranged in a circle */
.puff-links {
    position: absolute;
    inset: 0;
}

.puff-links a {
    --radius: min(40vmin, 280px);         /* distance from the center */
    position: absolute;
    top: 50%;
    left: 50%;
    transform:
        translate(-50%, -50%)             /* 1. center the pill on the middle of the screen */
        rotate(var(--angle))              /* 2. turn to face its direction */
        translate(var(--radius))          /* 3. walk outward */
        rotate(calc(-1 * var(--angle)));  /* 4. turn back so the text is upright */
    padding: 10px 22px;
    border-radius: 999px;
    background: rgba(22, 24, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.puff-links a:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

/* ===== Compass rose ===== */
.compass {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.compass-ring {
    fill: none;
    stroke: rgba(226, 232, 240, 0.35);
    stroke-width: 1;
}

/* Tick marks: a thick, dashed circle where each dash is one tick */
.compass-ticks-minor {
    fill: none;
    stroke: rgba(226, 232, 240, 0.35);
    stroke-width: 4;                      /* tick length */
    stroke-dasharray: 0.6 7.08;           /* 0.6 drawn, 7.08 gap -> 72 ticks around */
}

.compass-ticks-major {
    fill: none;
    stroke: rgba(226, 232, 240, 0.7);
    stroke-width: 8;                      /* longer ticks */
    stroke-dasharray: 1.5 67.6;           /* 8 ticks around: one per N, NE, E... */
    stroke-dashoffset: 0.75;              /* nudge so each tick is centered on its direction */
}

.rose-light { fill: #e2e8f0; opacity: 0.9; }
.rose-dark  { fill: #475569; }

.compass-letter {
    fill: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
    text-anchor: middle;                  /* center the letter horizontally on x */
    dominant-baseline: central;           /* and vertically on y */
}

.compass-letter.is-north {
    fill: #38bdf8;                        /* north gets the accent color, like a real compass */
}

/* Phones: there's no room for links around the circle, so stack them below in a 2x2 grid */
@media (max-width: 600px) {
    .puff-menu {
        align-content: center;
    }

    .puff-links {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 28px;
    }

    .puff-links a {
        position: static;
        transform: none;
        text-align: center;
    }
}

/* ===== Puff menu animations ===== */

/* 1. Overlay fades in, and out when closing */
.puff-menu {
    animation: puff-overlay-in 0.3s ease both;
}

.puff-menu.is-closing {
    animation: puff-overlay-out 0.25s ease both;
}

@keyframes puff-overlay-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes puff-overlay-out { from { opacity: 1; } to { opacity: 0; } }

/* ===== Wind gusts (replaces the puff cloud) ===== */
.wind {
    position: absolute;
    left: calc(var(--mouth-x, 52px) - 28px);              /* starts under wherever the mouth is */
    top: calc(var(--mouth-y, 50%) + 40px);
    width: clamp(140px, calc(50vw - 220px), 420px);       /* stops well short of the compass */
    height: auto;
    overflow: visible;
    pointer-events: none;
}

.gust {
    fill: none;
    stroke: rgba(226, 232, 240, 0.75);
    stroke-width: 3;
    stroke-linecap: round;                                /* soft, rounded streak ends */
    stroke-dasharray: 35 100;                             /* one 35-long dash, then a gap longer than the line */
    stroke-dashoffset: 35;                                /* start position: dash hidden before the line begins */
    opacity: 0;
    animation: gust 0.55s ease-out both;
}

.gust:nth-child(2) {
    animation-delay: 0.07s;
    stroke: rgba(56, 189, 248, 0.6);                      /* one cyan gust for a touch of color */
}

.gust:nth-child(3) {
    animation-delay: 0.14s;
}

@keyframes gust {
    0%   { stroke-dashoffset: 35;   opacity: 0; }
    20%  { opacity: 1; }
    100% { stroke-dashoffset: -100; opacity: 0; }         /* dash has slid off the far end, fully faded */
}

@keyframes puff-travel {
    0% {
        /* start under the mouth: 48px from the left edge, 60px below middle */
        transform: translate(calc(48px - 50vw), 60px) scale(0.15);
        opacity: 0;
    }
    10%  { opacity: 0.95; }
    70% {
        transform: translate(0, 0) scale(3);        /* arrives in the center, big */
        opacity: 0.9;
    }
    100% {
        transform: translate(0, 0) scale(5);        /* keeps swelling as it vanishes */
        opacity: 0;
    }
}

/* 3. The compass spins in and settles on north */
.celestial {
    animation: compass-in 1s cubic-bezier(.175, .885, .32, 1.275) 0.55s both;
}

@keyframes compass-in {
    from { transform: scale(0.2) rotate(-540deg); opacity: 0; }
    to   { transform: scale(1)   rotate(0deg);    opacity: 1; }
}

/* 4. The links pop out one by one */
.puff-links a {
    animation: link-pop 0.45s cubic-bezier(.175, .885, .32, 1.275) both;
    animation-delay: calc(1.25s + var(--i, 0) * 90ms);   /* link 0 at 1.25s, link 1 at 1.34s... */
}

@keyframes link-pop {
    from { scale: 0; opacity: 0; }
    to   { scale: 1; opacity: 1; }
}

/* ===== Tabs spat out of the mouth ===== */
.mouth-tabs {
    position: absolute;
    left: calc(var(--mouth-x, 52px) + 48px);                     /* just to the right of the mouth */
    top: clamp(190px, var(--mouth-y, 50%), calc(100% - 190px));  /* level with it, but never off-screen */
    transform: translateY(-50%);          /* vertically centered with the mouth */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.mouth-tabs a {
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(22, 24, 34, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    animation: spit-out 0.5s cubic-bezier(.175, .885, .32, 1.275) both;
    animation-delay: calc(0.15s + var(--j, 0) * 70ms);
}

/* A little tilt, alternating, so they look tossed rather than stacked */
.mouth-tabs a:nth-child(odd)  { rotate: -3deg; }
.mouth-tabs a:nth-child(even) { rotate: 2deg; }

.mouth-tabs a:hover {
    border-color: #38bdf8;
    color: #38bdf8;
}

@keyframes spit-out {
    from {
        transform: translateX(-80px) scale(0.2) rotate(-30deg);   /* starts inside the mouth */
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* Phones: no room beside the compass, so line them up along the top */
/* Phones: tabs in a row along the top... or the bottom, if the mouth is up top */
@media (max-width: 600px) {
    .mouth-tabs,
    .puff-menu.mouth-on-right .mouth-tabs {
        top: 16px;
        bottom: auto;
        left: 16px;
        right: 16px;
        transform: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
    }

    .puff-menu.mouth-on-top .mouth-tabs {
        top: auto;
        bottom: 16px;
    }
}

/* ===== Social icon buttons (in the mouth tabs) ===== */
.mouth-tabs a.social {
    width: 44px;                          /* 44px = comfortable tap size on phones */
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
}

/* The stencil: fill with the link's text color, show only the logo's shape */
.icon {
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}

.icon-substack  { --icon: url("/icons/substack.svg"); }
.icon-github    { --icon: url("/icons/github.svg"); }
.icon-instagram { --icon: url("/icons/instagram.svg"); }
.icon-youtube   { --icon: url("/icons/youtube.svg"); }
.icon-twitch    { --icon: url("/icons/twitch.svg"); }
.icon-discord   { --icon: url("/icons/discord.svg"); }

/* ===== About me ===== */
.about-card {
    display: flex;                        /* photo and text side by side */
    gap: 2rem;
    align-items: flex-start;              /* both start at the top */
    max-width: 860px;
    margin: 1.5rem auto 0 auto;
}

.headshot {
    width: 180px;
    height: 180px;
    flex-shrink: 0;                       /* never let the text squash the photo */
    border-radius: 50%;
    object-fit: cover;                    /* fill the circle without stretching the photo */
    border: 3px solid #1e293b;
    box-shadow:
        0 0 0 3px rgba(56, 189, 248, 0.35),   /* thin cyan ring outside the border */
        0 10px 30px rgba(0, 0, 0, 0.5);       /* soft drop shadow */
}

.about-text p {
    margin: 0;
    line-height: 1.7;
}

.about-text p + p {
    margin-top: 1rem;                     /* space between paragraphs, but not above the first */
}

/* Phones: photo on top, everything centered */
@media (max-width: 600px) {
    .about-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ===== Slim nav (always visible) ===== */
.topnav {
    position: sticky;
    top: 0;
    z-index: 1000;                        /* above the page, below the mouth menu (2000) */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 22px;                        /* row gap, column gap */
    padding: 12px 16px;
    margin: -20px -20px 1.5rem -20px;     /* cancels the body's 20px padding so it spans edge to edge */
    background: rgba(13, 14, 18, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #1e293b;
}

.topnav a {
    color: #94a3b8;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent; /* reserves space so the underline doesn't shift text */
    transition: color 0.2s ease, border-color 0.2s ease;
}

.topnav a:hover {
    color: #e2e8f0;
}

.topnav a.active {
    color: #e2e8f0;
    border-bottom-color: #38bdf8;         /* cyan underline on the current section */
}

/* The tiny sun / moon */
.topnav-celestial {
    width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 0;
    border: 0;
    background: none;
    display: grid;
    place-items: center;
    cursor: pointer;
}

.celestial-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transition: scale 0.2s cubic-bezier(.175, .885, .32, 1.275);
}

.topnav-celestial:hover .celestial-dot {
    scale: 1.25;
}

.celestial-dot.is-sun {
    background: radial-gradient(circle at 40% 35%, #fff3b0, #fbbf24 55%, #f59e0b);
    box-shadow: 0 0 10px 3px rgba(251, 191, 36, 0.5);
}

.celestial-dot.is-moon {
    background: radial-gradient(circle at 35% 30%, #f8fafc, #cbd5e1 60%, #94a3b8);
    box-shadow: 0 0 8px 2px rgba(203, 213, 225, 0.4);
}

/* Phones: tighter spacing so it fits on one or two lines */
@media (max-width: 600px) {
    .topnav {
        gap: 4px 14px;
    }

    .topnav a {
        font-size: 0.9rem;
    }
}

/* ===== Daily photo background ===== */
.photo-backdrop {
    position: fixed;
    inset: -20px;                         /* slightly bigger than the screen so the blur's soft edges stay hidden */
    z-index: -1;                          /* behind all page content */
    background-size: cover;               /* fill the screen, crop the overflow (like object-fit: cover) */
    background-position: center;
    filter: blur(6px) brightness(0.35) saturate(1.1);   /* soft, dark and readable behind text */
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
}

.photo-backdrop.is-visible {
    opacity: 1;
}

/* Footer "spin again" link-style button */
.spin-again {
    background: none;
    border: 0;
    padding: 4px 8px;
    color: #94a3b8;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 6px;
}

.spin-again:hover {
    color: #38bdf8;
}

/* ===== Your face, blended into the sun / moon ===== */
.celestial-face {
    position: absolute;
    inset: 36%;                           /* exactly the same circle as .celestial-body */
    border-radius: 50%;
    background: url("/Images/face-overlay-3.png") center / cover no-repeat;
    mix-blend-mode: multiply;             /* darken what's underneath, like ink on paper */
    opacity: 0.7;
    pointer-events: none;
}

/* While being dragged: lift it slightly and switch off the springy transitions */
.mouth.is-dragging {
    cursor: grabbing;
    scale: 1.12;
    transition: none;
}

/* Mouth on the right half: everything comes out toward the left instead */
.puff-menu.mouth-on-right .wind {
    left: auto;
    right: calc(100% - var(--mouth-x) - 28px);
    transform: scaleX(-1);                /* mirror the gusts so they blow leftward */
}

.puff-menu.mouth-on-right .mouth-tabs {
    left: auto;
    right: calc(100% - var(--mouth-x) + 48px);
    align-items: flex-end;                /* line the tabs up on their right edges */
}

/* ===== Live visitor count (in the slim nav) ===== */
.live-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 0.8rem;
}

/* The `hidden` attribute loses to `display: inline-flex` above, so re-hide it explicitly */
.live-count[hidden] {
    display: none;
}

/* A small green "online" dot, drawn by CSS (no image needed) */
.live-count::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px #4ade80;              /* soft glow */
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    50% { opacity: 0.35; }                    /* fades halfway through each cycle, then back */
}

/* ===== Instagram feed (bottom of the Photos tab) ===== */
.instagram {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #1e293b;          /* same divider as the header and footer */
    text-align: center;
}

.instagram-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;                 /* 3 posts or 12, the row stays centered */
    gap: 12px;
    margin: 1rem 0 1.25rem;
}

.instagram-tile {
    position: relative;                      /* lets the ▶ badge sit in the corner */
    display: block;
    width: min(220px, 45%);                  /* two per row on phones */
    aspect-ratio: 1;                         /* always square */
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid #1e293b;
    background: #161822;
    transition: border-color 0.2s ease;
}

.instagram-tile:hover {
    border-color: #38bdf8;
}

.instagram-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;                       /* fill the square, crop the extra */
    display: block;
    transition: scale 0.3s ease;
}

.instagram-tile:hover img {
    scale: 1.05;                             /* slow zoom; the tile's overflow:hidden keeps it in the square */
}

.instagram-video {
    position: absolute;
    top: 8px;
    right: 10px;
    color: #ffffff;
    font-size: 0.9rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* ===== Shop ===== */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));   /* as many 240px+ columns as fit */
    gap: 20px;
    margin-top: 20px;
}

.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;                        /* clips the image to the rounded corners */
    background-color: #161822;
    border: 1px solid #1e293b;
    border-radius: 12px;
}

.product-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}

.product-card h3 {
    margin: 14px 16px 4px;
}

.product-card p {
    margin: 0 16px 14px;
}

.product-price {
    color: #38bdf8;
    font-weight: 700;
}
/* ===== Shop form ===== */
.shop-form {
    max-width: 420px;
    margin: 2.5rem auto 0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background-color: #161822;
    border: 1px solid #1e293b;
    border-radius: 12px;
}

.shop-form h3 {
    margin: 0;
}

.shop-form-note {
    margin: 0 0 8px;
    font-size: 0.85rem;
}

.shop-form label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e2e8f0;
}

.shop-form input {
    font: inherit;
    padding: 10px 12px;
    color: #e2e8f0;
    background-color: #0d0e12;
    border: 1px solid #1e293b;
    border-radius: 8px;
}

.shop-form input:focus-visible {
    outline: 2px solid #38bdf8;
    outline-offset: 2px;
}

.shop-form button {
    margin-top: 8px;
    padding: 10px 16px;
    font: inherit;
    font-weight: 700;
    color: #0d0e12;
    background-color: #38bdf8;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.shop-form button:disabled {
    opacity: 0.6;
    cursor: wait;
}

.shop-form-status {
    margin: 4px 0 0;
    min-height: 1.6em;                     /* reserves space so the form doesn't jump when a message appears */
    font-size: 0.9rem;
}

/* Honeypot: moved off-screen instead of display:none, because some bots skip fields that are display:none */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}