/* =========================================================
   JASRIELLE
   ANGELIC / SPARKLY / Y2K INTERNET
   BRIGHT PERIWINKLE / PURPLE EDITION
   FULL REPLACEMENT CSS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Quicksand:wght@400;500;600;700&display=swap');


/* =========================================================
   VARIABLES
========================================================= */

:root {
    --pink: #9b72c4;
    --pink-light: #e7d8fa;
    --pink-soft: #f5efff;

    --purple: #8066d9;
    --purple-dark: #5a46a5;
    --purple-deep: #4c3a91;
    --purple-light: #ddd5ff;
    --purple-bright: #9582f2;

    --periwinkle: #a99fff;
    --periwinkle-light: #e2e0ff;
    --periwinkle-bright: #b8b0ff;

    --blue: #9fbfff;
    --blue-light: #e4edff;
    --blue-dark: #718bd1;

    --white: #ffffff;

    --text: #5d5577;
    --muted: #827a9a;

    --line: #d2c9ed;

    --button-bg:
        linear-gradient(
            180deg,
            #eeeaff 0%,
            #d8d3f8 100%
        );

    --button-bg-hover:
        linear-gradient(
            180deg,
            #ddd6ff 0%,
            #c3b9f0 100%
        );

    --button-bg-active:
        linear-gradient(
            180deg,
            #9582e8 0%,
            #7662c9 100%
        );

    --button-text: #51427e;
    --button-text-hover: #40316f;

    --button-shadow: #aaa0d3;
    --button-shadow-dark: #6756a7;

    --shadow:
        0 8px 25px rgba(72,58,125,.14);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        "Quicksand",
        "Trebuchet MS",
        Arial,
        sans-serif;

    color: var(--text);

    overflow-x: hidden;

    background-color: #eaf0ff;

    background-image:
        radial-gradient(
            circle at 10% 15%,
            rgba(255,255,255,.98) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 85% 12%,
            rgba(255,255,255,.95) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 72% 36%,
            rgba(255,255,255,.95) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 18% 60%,
            rgba(255,255,255,.9) 0 1px,
            transparent 2px
        ),
        radial-gradient(
            circle at 90% 75%,
            rgba(255,255,255,.98) 0 1px,
            transparent 2px
        ),
        linear-gradient(
            180deg,
            #e2ecff 0%,
            #ebe9ff 48%,
            #f5e8f8 100%
        );

    background-attachment: fixed;
}
/* =========================================================
   FLOATING DECORATION
========================================================= */

body::before {
    content:
        "✦   ˚   ·   ✧   ˚   ʚɞ   ·   ✦   ˚   ☾   ·   ✧   ˚   ✦";

    position: fixed;
    top: 6px;
    left: 0;

    width: 100%;

    text-align: center;

    color: rgba(255,255,255,.98);

    font-family:
        "Quicksand",
        sans-serif;

    font-size: 14px;
    letter-spacing: 4px;

    z-index: 100;

    pointer-events: none;
    white-space: nowrap;
}

body::after {
    content:
        "·     ✦     ˚     ✧     ·     ʚɞ     ˚     ♡     ✦     ˚";

    position: fixed;

    bottom: 12px;
    left: 0;

    width: 100%;

    text-align: center;

    color: rgba(255,255,255,.72);

    font-size: 13px;
    letter-spacing: 6px;

    pointer-events: none;

    z-index: 0;
}


/* =========================================================
   SITE
========================================================= */

.site {
    position: relative;
    z-index: 2;

    width: min(1080px, 94%);

    margin: 42px auto 35px;
}


/* =========================================================
   TOP BAR
========================================================= */

.top-bar {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 10px;

    padding: 8px 12px;
    margin-bottom: 10px;

    border: 1px solid white;
    border-radius: 6px;

    background: rgba(255,255,255,.88);

    box-shadow:
        0 3px 10px rgba(72,58,125,.10);

    color: #71658d;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: bold;

    white-space: nowrap;
    overflow: hidden;
}


/* =========================================================
   ANGEL PROFILE
========================================================= */

.angel-profile {
    position: relative;
    overflow: hidden;

    padding: 25px 18px 30px;

    text-align: center;

    border: 3px solid white;
    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #e0dbff,
            #d2e2ff 50%,
            #ead9f8
        );

    box-shadow: var(--shadow);
}

.angel-decoration {
    position: absolute;
    z-index: 2;

    color: rgba(255,255,255,.82);

    font-size: 51px;
    line-height: 1;

    text-shadow:
        0 0 12px rgba(255,255,255,.9);

    pointer-events: none;
}

.angel-left {
    top: 25px;
    left: 18px;

    transform: rotate(-12deg);
}

.angel-right {
    top: 30px;
    right: 20px;

    transform: rotate(12deg);
}

.angel-profile::before {
    content: "☾";

    position: absolute;

    top: -35px;
    right: -10px;

    color: rgba(255,255,255,.7);

    font-size: 148px;
    line-height: 1;

    transform: rotate(-18deg);

    text-shadow:
        0 0 25px rgba(255,255,255,.75);
}

.angel-profile::after {
    content:
        "✦       ✧       ˚       ʚɞ       ✦       ♡       ✧       ˚       ✦";

    position: absolute;

    bottom: 13px;
    left: 0;

    width: 100%;

    color: rgba(255,255,255,.92);

    font-size: 16px;
    letter-spacing: 5px;

    white-space: nowrap;
}


/* =========================================================
   PROFILE CONTENT
========================================================= */

.profile-content {
    position: relative;
    z-index: 3;
}

.profile-label {
    display: inline-block;

    padding: 6px 12px;

    border: 1px solid white;
    border-radius: 5px;

    background: rgba(255,255,255,.94);

    color: #7055a0;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;

    box-shadow:
        0 2px 0 rgba(112,91,173,.16);
}

.profile-picture {
    display: block;

    width: min(155px, 48vw);
    aspect-ratio: 1;

    margin: 22px auto 16px;

    object-fit: cover;

    border: 6px solid white;
    border-radius: 50%;

    background: #c7d5fa;

    box-shadow:
        0 0 0 2px #b9ace5,
        0 8px 20px rgba(72,58,125,.18);
}

.angel-profile h1 {
    margin: 8px 0 12px;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: clamp(69px, 20vw, 123px);

    line-height: .72;

    font-weight: 500;
    font-style: italic;

    color: white;

    letter-spacing: -3px;

    text-shadow:
        3px 3px 0 #8e70c6,
        6px 6px 0 rgba(82,66,139,.14);
}

.angel-profile h1 span {
    color: white;
    font-style: normal;
}

.angel-stars {
    margin: 12px 0 9px;

    color: white;

    font-size: 19px;
    letter-spacing: 5px;

    text-shadow:
        0 0 8px rgba(255,255,255,.9);
}

.artist-description {
    max-width: 390px;

    margin: 0 auto;

    color: #5f5875;

    font-size: 14px;
    line-height: 1.9;
    font-weight: 600;
}

.artist-description strong {
    color: #7055a0;

    font-family:
        "Quicksand",
        sans-serif;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .2px;
}

.artist-description-text {
    font-weight: 400;
}


/* =========================================================
   UNIVERSAL BUTTON LANGUAGE
========================================================= */

.nav,
.commission-nav,
.commission-mode-switcher,
.contact-buttons {
    background: rgba(255,255,255,.92);

    border: 2px solid white;
    border-radius: 8px;

    box-shadow:
        0 6px 18px rgba(72,58,125,.10);
}


/* =========================================================
   MAIN NAVIGATION
   COMMISSIONS + LINKS TOGGLE
========================================================= */

.nav {
    display: flex;
    flex-direction: column;

    gap: 7px;

    width: 100%;

    margin: 10px auto 16px;

    padding: 6px;
}

.nav-main {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 7px;
}

.nav-btn {
    min-width: 0;
    min-height: 42px;          /* gives a consistent height */

    padding: 11px 7px;

    border: 2px solid #ffffff;
    border-radius: 6px;

    background: var(--button-bg);

    color: var(--button-text);

    text-align: center;
    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;

    box-shadow:
        0 3px 0 var(--button-shadow),
        0 2px 6px rgba(72,58,125,.10);

    transition:
        .15s ease;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    /* THIS is the important part */
    display: flex;
    align-items: center;       /* vertical center */
    justify-content: center;   /* horizontal center */
    line-height: 1.25;
}

.nav-btn:hover {
    background: var(--button-bg-hover);

    color: var(--button-text-hover);

    border-color: white;

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 0 var(--button-shadow),
        0 5px 12px rgba(72,58,125,.15);
}

.nav-btn:active {
    transform:
        translateY(1px);

    box-shadow:
        0 2px 0 var(--button-shadow);
}

/* Expandable sub-links row */
.nav-links-row {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(90px, 1fr));

    gap: 7px;

    max-height: 0;
    opacity: 0;
    overflow: hidden;

    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        padding 0.25s ease;
}

.nav-links-row.open {
    max-height: 240px;          /* a bit more room */
    opacity: 1;
    padding-bottom: 6px;        /* ← this lets the shadows show */
}

/* =========================================================
   MAIN GRID
   MOBILE = STACKED
========================================================= */

.main-grid {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    gap: 15px;
}


/* =========================================================
   GENERAL BOX
========================================================= */

.box {
    padding: 17px;

    border: 2px solid white;
    border-radius: 7px;

    background: rgba(255,255,255,.90);

    box-shadow: var(--shadow);
}

.box-title {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 14px;

    color: #725fa8;

    font-family:
        "Courier New",
        monospace;

    font-size: 12px;
    font-weight: bold;
}

.box-title::after {
    content: "";

    flex: 1;

    height: 1px;

    background: var(--line);
}


/* =========================================================
   SIDEBAR
========================================================= */

.sidebar {
    display: flex;
    flex-direction: column;

    gap: 15px;

    min-width: 0;
}


/* =========================================================
   CURRENTLY
========================================================= */

.currently-box {
    position: relative;
    overflow: visible;
}

.currently {
    display: grid;

    gap: 5px;

    padding-right: 45px;
}

.currently > div {
    padding: 8px 9px;

    border: 1px solid #ddd5f0;
    border-radius: 4px;

    background: #faf9ff;

    font-size: 12px;
    line-height: 1.55;
}

.currently > div > span:first-child {
    color: #7055a0;

    font-weight: 700;

    letter-spacing: .04em;

    margin-right: 5px;
}

.currently > div > span.currently-value {
    color: #706980;

    font-weight: 400;

    opacity: 1;

    letter-spacing: normal;
}


/* =========================================================
   SITTING CHARACTER
========================================================= */

.sitting-character {
    position: absolute;

    width: 125px;

    right: -18px;
    bottom: -100px;

    z-index: 20;

    cursor: pointer;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-drag: none;

    outline: none;

    filter:
        saturate(1.4)
        drop-shadow(
            7px 7px 3px rgba(105,91,157,.28)
        )
        drop-shadow(
            11px 10px 8px rgba(145,130,190,.16)
        );

    transform: rotate(2deg);

    transition: filter .15s ease;
}

.sitting-character:focus,
.sitting-character:focus-visible,
.sitting-character:active {
    outline: none;
    box-shadow: none;
}


/* =========================================================
   CHARACTER JOSTLE
========================================================= */

@keyframes littleJostle {

    0% {
        transform: translate(0,0) rotate(2deg);
    }

    15% {
        transform: translate(-4px,-2px) rotate(-4deg);
    }

    30% {
        transform: translate(5px,0) rotate(5deg);
    }

    45% {
        transform: translate(-4px,1px) rotate(-3deg);
    }

    60% {
        transform: translate(3px,-1px) rotate(4deg);
    }

    75% {
        transform: translate(-2px,0) rotate(1deg);
    }

    100% {
        transform: translate(0,0) rotate(2deg);
    }

}

.sitting-character.jostle {
    animation: littleJostle .42s ease-in-out;
}


/* =========================================================
   STATUS
========================================================= */

.status {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px;

    border: 1px solid #d8d0eb;
    border-radius: 5px;

    background: #f8f7ff;

    font-size: 13px;
    font-weight: 700;
}

.status-dot {
    width: 9px;
    height: 9px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #78cfa5;

    box-shadow:
        0 0 0 3px #def4e8;
}


/* =========================================================
   DREAM RADIO
========================================================= */

.music-player {
    display: flex;

    align-items: center;

    gap: 12px;

    padding: 10px;

    border: 1px solid #d7cfee;
    border-radius: 5px;

    background: #f7f6ff;
}

.record {
    position: relative;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #c9bfff 0 10%,
            #8069d9 11% 14%,
            #51436e 15% 28%,
            #756391 29% 42%,
            #4e4268 43% 54%,
            #8773a2 55% 67%,
            #463a5d 68% 100%
        );

    box-shadow:
        0 3px 7px rgba(76,61,105,.22);

    animation:
        spinRecord 4s linear infinite;

    animation-play-state: paused;
}

.record::after {
    content: "♡";

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color: #fff;

    font-size: 13px;
}

@keyframes spinRecord {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

.music-player.playing .record {
    animation-play-state: running;
}

.music-info {
    min-width: 0;
    flex: 1;
}

.music-title {
    margin-bottom: 7px;

    color: #725fa8;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: bold;
}

audio {
    display: block;

    width: 100%;
    height: 30px;
}

.music-name {
    margin-bottom: 3px;

    color: #706980;

    font-family:
        "Quicksand",
        sans-serif;

    font-size: 13px;

    font-weight: 600;
}

.music-artist {
    display: inline-block;

    margin-bottom: 7px;

    color: #7055a0;

    font-family:
        "Courier New",
        monospace;

    font-size: 15px;

    font-weight: bold;

    text-decoration: none;
}

.music-artist:hover {
    color: #6c58c7;

    text-decoration: underline;
}


/* =========================================================
   GALLERY
========================================================= */

.art-section {
    width: 100%;
    min-width: 0;

    padding: 17px;

    border: 2px solid white;
    border-radius: 7px;

    background: rgba(255,255,255,.82);

    box-shadow: var(--shadow);
}

.section-heading {
    display: flex;

    justify-content: space-between;
    align-items: baseline;

    margin-bottom: 7px;
}

.section-heading h2 {
    margin: 0;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif;

    font-size: 31px;

    font-style: italic;
    font-weight: 500;

    color: #66539c;
}

.section-heading small {
    color: #807594;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
}

.gallery-note {
    margin-bottom: 13px;

    color: #887c9c;

    text-align: center;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    letter-spacing: .5px;
}


/* =========================================================
   ART GRID
========================================================= */

.art-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap: 8px;

    width: 100%;
    min-width: 0;
}

.art {
    min-width: 0;

    padding: 5px;

    border: 1px solid #d7d0eb;
    border-radius: 5px;

    background: white;

    box-shadow:
        0 4px 12px rgba(80,60,110,.08);

    cursor: pointer;

    transition: .15s;
}

.art:nth-child(odd) {
    transform: rotate(-.6deg);
}

.art:nth-child(even) {
    transform: rotate(.6deg);
}

.art:hover {
    transform:
        translateY(-3px)
        rotate(0);

    box-shadow:
        0 7px 18px rgba(80,60,110,.16);
}

.art img {
    display: block;

    width: 100%;

    aspect-ratio: 1 / 1.12;

    object-fit: cover;

    border-radius: 3px;
}

.art-label {
    padding: 7px 3px 3px;

    color: #817495;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   LIGHTBOX
========================================================= */

.lightbox {
    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 25px;

    background: rgba(45,34,67,.82);

    backdrop-filter: blur(5px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}

.lightbox.open {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}

.lightbox-content {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    max-width: 94vw;
    max-height: 94vh;

    animation:
        lightboxPop .22s ease-out;
}

@keyframes lightboxPop {

    from {
        opacity: 0;
        transform: scale(.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }

}

.lightbox-content img {
    display: block;

    max-width: 92vw;
    max-height: 82vh;

    width: auto;
    height: auto;

    object-fit: contain;

    border: 5px solid white;
    border-radius: 3px;

    background: white;

    box-shadow:
        0 12px 50px rgba(0,0,0,.3);
}

.lightbox-caption {
    margin-top: 10px;

    padding: 6px 12px;

    color: white;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;

    text-shadow:
        0 1px 4px rgba(0,0,0,.4);
}

.lightbox-close {
    position: fixed;

    top: 18px;
    right: 20px;

    z-index: 1001;

    width: 34px;
    height: 34px;

    padding: 0;

    border: 1px solid white;
    border-radius: 4px;

    background: rgba(255,255,255,.94);

    color: #705bc1;

    font-size: 26px;
    line-height: 30px;

    cursor: pointer;

    box-shadow:
        0 3px 10px rgba(0,0,0,.15);
}

.lightbox-close:hover {
    background: #ded7ff;
    color: #5945a4;
}

body.lightbox-open {
    overflow: hidden;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    margin-top: 15px;

    padding: 25px 15px;

    text-align: center;

    border: 2px solid white;
    border-radius: 7px;

    background: rgba(255,255,255,.80);

    box-shadow: var(--shadow);

    color: #817493;

    font-size: 12px;
    line-height: 1.9;
}

.footer-stars {
    margin-bottom: 7px;

    color: #7055a0;

    font-size: 17px;
    letter-spacing: 5px;
}

.footer-links a {
    color: #66539c;

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: bold;

    text-decoration: none;
}


/* =========================================================
   COMMISSION PAGE
========================================================= */

.commission-site {
    position: relative;

    z-index: 2;

    width: min(980px,94%);

    margin: 42px auto 35px;
}


/* =========================================================
   COMMISSION NAV
========================================================= */

.commission-nav {
    position: sticky;

    top: 7px;

    z-index: 50;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    margin: 10px auto 16px;

    padding: 6px;
}

.commission-nav a {
    display: block;

    padding: 9px 12px;

    border: 2px solid white;
    border-radius: 6px;

    background: var(--button-bg);

    color: var(--button-text);

    text-decoration: none;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
    font-weight: bold;

    box-shadow:
        0 3px 0 var(--button-shadow);

    transition: .15s;
}

.commission-nav a:hover {
    background: var(--button-bg-hover);

    color: var(--button-text-hover);

    transform:
        translateY(-2px);

    box-shadow:
        0 5px 0 var(--button-shadow);
}

.commission-nav span {
    flex: 1;

    text-align: center;

    color: #817594;

    font-family:
        "Courier New",
        monospace;

    font-size: 10px;
}


/* =========================================================
   COMMISSION MODE SWITCHER
========================================================= */

.commission-mode-switcher {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 6px;

    width: 100%;

    margin: 10px auto 12px;

    padding: 6px;
}

.commission-mode-button {
    padding: 10px 8px;

    border: 2px solid white;
    border-radius: 6px;

    background: var(--button-bg);

    color: var(--button-text);

    font-family:
        "Courier New",
        monospace;

    font-size: 11px;
    font-weight: bold;

    cursor: pointer;

    box-shadow:
        0 3px 0 var(--button-shadow);

    transition:
        .15s ease;
}

.commission-mode-button:hover {
    transform:
        translateY(-1px);

    background: var(--button-bg-hover);

    color: var(--button-text-hover);

    box-shadow:
        0 4px 0 var(--button-shadow);
}

.commission-mode-button.active {
    background: var(--button-bg-active);

    color: white;

    box-shadow:
        0 3px 0 var(--button-shadow-dark);
}

.commission-mode-button.active:hover {
    background:
        linear-gradient(
            180deg,
            #a696f3,
            #806ad2
        );

    color: white;
}


/* =========================================================
   COMMISSION GRID
========================================================= */

.commission-grid {
    display: grid;

    grid-template-columns: 1fr;

    gap: 15px;

    align-items: start;
}

.commission-art-box {
    min-width: 0;
}

.commission-artwork {
    width: 100%;

    padding: 6px;

    border: 1px solid #d8d0eb;

    background: #faf9ff;

    box-shadow:
        0 4px 12px rgba(80,60,110,.08);

    cursor: pointer;

    transition: .15s;
}

.commission-artwork:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 7px 18px rgba(80,60,110,.14);
}

.commission-artwork img {
    display:
        block;

    width:
        100%;

    height:
        auto;

    max-height:
        650px;

    object-fit:
        contain;

    background:
        #eeeaff;
}

.art-caption {
    margin-top:
        8px;

    color:
        #827694;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    text-align:
        center;
}

.commission-details {
    display:
        flex;

    flex-direction:
        column;

    gap:
        15px;
}


/* =========================================================
   PRICES
========================================================= */

.price-list {
    display:
        grid;

    gap:
        6px;
}

.price-row {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        10px 11px;

    border:
        1px solid #dcd4ed;

    border-radius:
        5px;

    background:
        #faf9ff;

    font-family:
        "Courier New",
        monospace;

    font-size:
        12px;
}

.price-row span {
    color:
        #705fa1;

    font-weight:
        bold;
}

.price-row strong {
    color:
        #6751a6;

    font-size:
        14px;
}

.price-note {
    margin:
        12px 0 0;

    color:
        #837796;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    line-height:
        1.7;
}


/* =========================================================
   COMMISSION INFO
========================================================= */

.commission-info p {
    margin:
        0 0 13px;

    font-size:
        12px;

    line-height:
        1.8;

    white-space:
        normal;
}

#commissionAbout {
    white-space:
        pre-line;
}

#commissionSurprise {
    white-space:
        normal;
}

.commission-info strong {
    color:
        #6751a6;

    font-family:
        "Quicksand",
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;
}

.commission-note {
    padding:
        11px;

    border:
        1px dashed #bfb2df;

    border-radius:
        5px;

    background:
        #f3efff;

    color:
        #796d91;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    line-height:
        1.7;

    white-space:
        pre-line;
}


/* =========================================================
   CONTACT
========================================================= */

.commission-contact {
    margin-top:
        15px;

    text-align:
        center;
}

.commission-contact p {
    margin:
        0 0 14px;

    font-size:
        12px;

    line-height:
        1.8;
}

.contact-buttons {
    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding:
        6px;
}

.contact-buttons a {
    display:
        block;

    padding:
        10px 6px;

    border:
        2px solid white;

    border-radius:
        6px;

    background:
        var(--button-bg);

    color:
        var(--button-text);

    text-decoration:
        none;

    font-family:
        "Courier New",
        monospace;

    font-size:
        10px;

    font-weight:
        bold;

    box-shadow:
        0 3px 0 var(--button-shadow);

    transition:
        .15s;
}

.contact-buttons a:hover {
    transform:
        translateY(-2px);

    background:
        var(--button-bg-hover);

    color:
        var(--button-text-hover);

    box-shadow:
        0 4px 0 var(--button-shadow);
}


/* =========================================================
   TERMS OF SERVICE
========================================================= */

.tos-section {
    margin-top:
        15px;

    padding:
        0;

    overflow:
        hidden;
}

.tos-dropdown {
    width:
        100%;
}

.tos-dropdown > summary {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    padding:
        17px;

    color:
        #705fa1;

    font-family:
        "Courier New",
        monospace;

    font-size:
        13px;

    font-weight:
        bold;

    cursor:
        pointer;

    list-style:
        none;

    user-select:
        none;
}

.tos-dropdown > summary::-webkit-details-marker {
    display:
        none;
}

.tos-dropdown > summary::marker {
    display:
        none;
}

.tos-arrow {
    flex-shrink:
        0;

    color:
        #7055a0;

    font-size:
        17px;

    transition:
        transform .2s ease;
}

.tos-dropdown[open] > summary {
    border-bottom:
        1px solid #ddd5eb;
}

.tos-dropdown[open] .tos-arrow {
    transform:
        rotate(180deg);
}


/* =========================================================
   OPEN ALL BUTTON
========================================================= */

.tos-toggle-all {
    display:
        block;

    margin:
        0 18px 12px auto;

    padding:
        7px 11px;

    border:
        2px solid white;

    border-radius:
        6px;

    background:
        var(--button-bg);

    color:
        var(--button-text);

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    font-weight:
        bold;

    cursor:
        pointer;

    box-shadow:
        0 2px 0 var(--button-shadow);

    transition:
        .15s;
}

.tos-toggle-all:hover {
    background:
        var(--button-bg-hover);

    color:
        var(--button-text-hover);

    transform:
        translateY(-1px);

    box-shadow:
        0 3px 0 var(--button-shadow);
}


/* =========================================================
   TOS CONTENT
========================================================= */

.tos-content {
    padding:
        0 17px 17px;
}


/* =========================================================
   NESTED DROPDOWNS
========================================================= */

.tos-item {
    margin-top:
        6px;

    border:
        1px solid #ddd5ed;

    border-radius:
        5px;

    background:
        #faf9ff;

    overflow:
        hidden;
}

.tos-item > summary {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    padding:
        10px 11px;

    color:
        #705fa1;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    font-weight:
        bold;

    cursor:
        pointer;

    list-style:
        none;

    user-select:
        none;
}

.tos-item > summary::-webkit-details-marker {
    display:
        none;
}

.tos-item > summary::marker {
    display:
        none;
}

.tos-item-arrow {
    flex-shrink:
        0;

    color:
        #7055a0;

    transition:
        transform .2s ease;
}

.tos-item[open] .tos-item-arrow {
    transform:
        rotate(180deg);
}

.tos-item[open] > summary {
    border-bottom:
        1px solid #e1daee;

    background:
        #f5f2ff;
}


/* =========================================================
   TOS CONTENT
========================================================= */

.tos-item-content {
    padding:
        11px 12px 12px;

    color:
        #716980;

    font-size:
        12px;

    line-height:
        1.75;
}

.tos-item-content p {
    margin:
        0 0 10px;
}

.tos-item-content p:last-child {
    margin-bottom:
        0;
}

.tos-item-content strong {
    color:
        #6751a6;

    font-weight:
        700;
}

.tos-item-content ul {
    margin:
        5px 0 8px;

    padding-left:
        18px;
}

.tos-item-content li {
    margin-bottom:
        5px;
}

.tos-item-content li:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   FINAL AGREEMENT
========================================================= */

.tos-agreement {
    margin-top:
        12px;

    padding:
        12px;

    border:
        1px dashed #bfb2df;

    border-radius:
        5px;

    background:
        #f3efff;

    color:
        #796d91;

    text-align:
        center;

    font-family:
        "Courier New",
        monospace;

    font-size:
        11px;

    font-weight:
        bold;

    line-height:
        1.7;
}


/* =========================================================
   DESKTOP
========================================================= */

@media screen and (min-width: 700px) {

    .angel-profile {
        min-height:
            480px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }

    .profile-picture {
        width:
            165px;
    }

    .profile-label {
        font-size:
            14px;

        padding:
            7px 14px;
    }

    .angel-profile h1 {
        font-size:
            clamp(93px,12vw,138px);
    }


    /* =====================================================
       MAIN GRID
    ===================================================== */

    .main-grid {
        display:
            grid !important;

        grid-template-columns:
            285px
            minmax(0, 1fr) !important;

        grid-template-rows:
            auto;

        gap:
            18px !important;

        align-items:
            start;

        width:
            100%;
    }

    .main-grid > .sidebar {
        grid-column:
            1;

        grid-row:
            1;

        width:
            100%;

        min-width:
            0;
    }

    .main-grid > main {
        grid-column:
            2;

        grid-row:
            1;

        width:
            100%;

        min-width:
            0;
    }


    .sidebar {
        position:
            sticky;

        top:
            15px;

        min-width:
            0;
    }


    .art-section {
        width:
            100%;

        min-width:
            0;
    }

    .art-grid {
        grid-template-columns:
            repeat(3, minmax(0,1fr));

        gap:
            11px;

        width:
            100%;
    }


    .sitting-character {
        width:
            150px;

        right:
            -24px;

        bottom:
            -42px;
    }


    /* =====================================================
       COMMISSIONS
    ===================================================== */

    .commission-grid {
        grid-template-columns:
            minmax(0,1.1fr)
            minmax(300px,.9fr);

        gap:
            18px;

        align-items:
            start;
    }

    .commission-art-box {
        height:
            auto;
    }

    .commission-artwork {
        min-height:
            430px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;
    }

    .commission-artwork img {
        width:
            100%;

        height:
            auto;

        max-height:
            650px;

        object-fit:
            contain;
    }

    .commission-details {
        height:
            auto;
    }


    /* =====================================================
       READABILITY
    ===================================================== */

    .top-bar {
        font-size:
            14px;

        padding:
            9px 14px;
    }

    .artist-description {
        font-size:
            16px;

        line-height:
            1.8;
    }

    .artist-description strong {
        font-size:
            14px;
    }

    .nav-btn {
        font-size:
            12px;

        padding:
            11px 6px;
    }

    .box-title {
        font-size:
            14px;
    }

    .status {
        font-size:
            15px;

        padding:
            11px;
    }

    .currently > div {
        font-size:
            14px;

        padding:
            9px 10px;

        line-height:
            1.6;
    }

    .currently > div > span:first-child {
        font-size:
            14px;

        font-weight:
            700;
    }

    .currently > div > span.currently-value {
        font-size:
            14px;

        font-weight:
            400;
    }

    .music-title {
        font-size:
            14px;
    }

    .section-heading h2 {
        font-size:
            35px;
    }

    .section-heading small {
        font-size:
            12px;
    }

    .art-label {
        font-size:
            12px;

        padding:
            8px 4px 4px;
    }

    footer {
        font-size:
            14px;
    }

    .footer-links a {
        font-size:
            12px;
    }


    /* =====================================================
       COMMISSION READABILITY
    ===================================================== */

    .commission-mode-button {
        font-size:
            13px;

        padding:
            11px 9px;
    }

    .commission-nav a {
        font-size:
            13px;
    }

    .commission-nav span {
        font-size:
            12px;
    }

    .commission-site .commission-back,
    .commission-site .commission-back strong {
        font-size:
            18px;
    }

    .commission-site .commission-back {
        padding:
            11px 14px;
    }

    .commission-site .box-title {
        font-size:
            15px;
    }

    .commission-site .price-row {
        font-size:
            15px;
    }

    .commission-site .price-row strong {
        font-size:
            17px;
    }

    .commission-site .price-note {
        font-size:
            13px;
    }

    .commission-site .commission-info p {
        font-size:
            15px;

        line-height:
            1.8;
    }

    .commission-site .commission-info strong {
        font-size:
            14px;
    }

    .commission-site .commission-note {
        font-size:
            13px;

        line-height:
            1.8;
    }

    .commission-site .art-caption {
        font-size:
            13px;
    }

    .commission-site .commission-contact p {
        font-size:
            15px;

        line-height:
            1.8;
    }

    .commission-site .contact-buttons a {
        font-size:
            13px;

        padding:
            11px 8px;
    }


    /* =====================================================
       TOS
    ===================================================== */

    .tos-dropdown > summary {
        font-size:
            15px;
    }

    .tos-item > summary {
        font-size:
            13px;

        padding:
            11px 12px;
    }

    .tos-item-content {
        font-size:
            14px;

        line-height:
            1.8;
    }

    .tos-toggle-all {
        font-size:
            11px;
    }

    .tos-agreement {
        font-size:
            12px;
    }

}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media screen and (min-width: 1050px) {

    .main-grid {
        display:
            grid !important;

        grid-template-columns:
            290px
            minmax(0,1fr) !important;

        gap:
            22px !important;
    }

    .main-grid > .sidebar {
        grid-column:
            1;

        grid-row:
            1;
    }

    .main-grid > main {
        grid-column:
            2;

        grid-row:
            1;
    }

    .art-grid {
        gap:
            13px;
    }

    .commission-grid {
        grid-template-columns:
            minmax(0,1.15fr)
            minmax(330px,.85fr);

        gap:
            22px;
    }

    .top-bar {
        font-size:
            14px;
    }

    .artist-description {
        font-size:
            17px;
    }

    .artist-description strong {
        font-size:
            15px;
    }

    .profile-label {
        font-size:
            15px;

        padding:
            8px 15px;
    }

    .nav-btn {
        font-size:
            13px;
    }

    .box-title {
        font-size:
            15px;
    }

    .status {
        font-size:
            16px;
    }

    .currently > div {
        font-size:
            15px;
    }

    .currently > div > span:first-child {
        font-size:
            15px;
    }

    .currently > div > span.currently-value {
        font-size:
            15px;
    }

    .music-title {
        font-size:
            14px;
    }

    .section-heading h2 {
        font-size:
            37px;
    }

    .section-heading small {
        font-size:
            13px;
    }

    .art-label {
        font-size:
            13px;
    }

    footer {
        font-size:
            15px;
    }

    .footer-links a {
        font-size:
            13px;
    }


    /* =====================================================
       COMMISSION
    ===================================================== */

    .commission-mode-button {
        font-size:
            14px;

        padding:
            12px 10px;
    }

    .commission-site .commission-back,
    .commission-site .commission-back strong {
        font-size:
            19px;
    }

    .commission-site .commission-back {
        padding:
            12px 15px;
    }

    .commission-site .commission-nav a {
        font-size:
            14px;
    }

    .commission-site .commission-nav span {
        font-size:
            13px;
    }

    .commission-site .box-title {
        font-size:
            16px;
    }

    .commission-site .price-row {
        font-size:
            16px;
    }

    .commission-site .price-row strong {
        font-size:
            18px;
    }

    .commission-site .price-note {
        font-size:
            14px;
    }

    .commission-site .commission-info p {
        font-size:
            16px;
    }

    .commission-site .commission-info strong {
        font-size:
            15px;
    }

    .commission-site .commission-note {
        font-size:
            14px;
    }

    .commission-site .art-caption {
        font-size:
            14px;
    }

    .commission-site .commission-contact p {
        font-size:
            16px;
    }

    .commission-site .contact-buttons a {
        font-size:
            14px;
    }


    /* =====================================================
       TOS
    ===================================================== */

    .tos-dropdown > summary {
        font-size:
            16px;
    }

    .tos-item > summary {
        font-size:
            14px;
    }

    .tos-item-content {
        font-size:
            15px;
    }

    .tos-toggle-all {
        font-size:
            12px;
    }

    .tos-agreement {
        font-size:
            13px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media screen and (max-width: 600px) {
  
    .angel-profile h1 {
    text-shadow:
        2px 2px 0 #8e70c6,
        4px 4px 0 rgba(82,66,139,.14);
    }
    .site,
    .commission-site {
        width:
            96%;
    }

    .top-bar span:last-child {
        display:
            none;
    }

    .angel-profile {
        padding:
            22px 12px 28px;
    }

    .angel-profile h1 {
        font-size:
            61px;
    }

    .angel-decoration {
        font-size:
            38px;
    }


    /* =====================================================
       MOBILE MAIN NAV
       COMMISSIONS + LINKS (toggle still works)
    ===================================================== */

    .nav {
        display: flex;
        flex-direction: column;

        gap: 7px;

        padding: 6px;
    }

    .nav-main {
        grid-template-columns: 1fr 1fr;
    }

    .nav-btn {
        width: 100%;

        min-width: 0;

        padding: 11px 6px;

        display: flex;

        align-items: center;

        justify-content: center;

        text-align: center;

        white-space: normal;

        line-height: 1.2;

        font-size: 10px;
    }

    .nav-links-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nav-links-row.open {
        max-height: 280px;
    }


    .box,
    .art-section {
        padding:
            13px;
    }

    .sitting-character {
        width:
            100px;

        right:
            -12px;

        bottom:
            -25px;
    }

    .currently {
        padding-right:
            35px;
    }

    .record {
        width:
            36px;

        height:
            36px;
    }


    /* =====================================================
       MOBILE COMMISSION NAV
    ===================================================== */

    .commission-nav {
        gap:
            4px;

        padding:
            6px;
    }

    .commission-nav a {
        padding:
            9px 7px;

        font-size:
            9.5px;
    }

    .commission-nav span {
        font-size:
            9px;
    }


    /* =====================================================
       MOBILE COMMISSION SWITCHER
    ===================================================== */

    .commission-mode-switcher {
        gap:
            4px;

        padding:
            6px;
    }

    .commission-mode-button {
        padding:
            8px 4px;

        font-size:
            9.5px;
    }


    /* =====================================================
       MOBILE CONTACT
    ===================================================== */

    .contact-buttons {
        grid-template-columns:
            1fr;

        padding:
            6px;
    }


    /* =====================================================
       LIGHTBOX
    ===================================================== */

    .lightbox {
        padding:
            12px;
    }

    .lightbox-content img {
        max-width:
            96vw;

        max-height:
            80vh;

        border-width:
            3px;
    }


    /* =====================================================
       TOS
    ===================================================== */

    .tos-dropdown > summary {
        padding:
            14px;

        font-size:
            11px;
    }

    .tos-content {
        padding:
            0 12px 12px;
    }

    .tos-toggle-all {
        margin:
            0 12px 9px auto;

        padding:
            5px 7px;

        font-size:
            9px;
    }

    .tos-item > summary {
        padding:
            9px;

        font-size:
            10px;
    }

    .tos-item-content {
        padding:
            9px 10px 10px;

        font-size:
            11px;
    }

    .tos-agreement {
        font-size:
            10px;

        padding:
            9px;
    }

}


/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media screen and (max-width: 350px) {

    .nav {
        gap:
            5px;

        padding:
            5px;
    }

    .nav-btn {
        font-size:
            9.5px;

        padding:
            9px 4px;
    }

    .commission-nav {
        gap:
            4px;
    }

    .commission-nav a {
        padding:
            9px 7px;

        font-size:
            9.5px;
    }

    .commission-nav span {
        font-size:
            9px;
    }

}


/* =========================================================
   FINAL LAYOUT SAFETY
========================================================= */

.main-grid,
.main-grid > .sidebar,
.main-grid > main,
.art-section,
.art-grid {
    min-width:
        0;
}

.main-grid > main {
    overflow:
        visible;
}