:root{
    --navy:#071722;
    --navy2:#0c2536;
    --blue:#69b8ef;
    --paper:#f5f0e8;
    --wood:#5d4632;
    --wood2:#2e241c;
    --ink:#0d1b26;
    --hand:"Comic Sans MS","Trebuchet MS",cursive;
    --body:Arial,Helvetica,sans-serif
    }
*{
    box-sizing:border-box
    }
html{
    background:var(--navy)
    }
body{
    margin:0;
    color:var(--ink);
    font-family:var(--body);
    background:#8d7a61
    }
button,input,textarea{font:inherit}a{color:inherit}
.site-header{
    min-height:96px;
    padding:16px clamp(20px,4vw,48px);
    display:flex;
    align-items:center;
    gap:30px;
    color:#fff;
    background:linear-gradient(100deg,#06131d,#091d2b)
    }
.brand{
    display:flex;
    flex-direction:column;
    text-decoration:none;
    line-height:1
    }
.brand strong{
    font:700 clamp(2rem,3vw,3rem)/1 var(--hand)
    }
.brand span{
    margin-top:7px;color:var(--blue);
    font:1.05rem var(--hand)
    }
.site-nav{
    margin-left:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:clamp(10px,2vw,28px)
    }
.site-nav a{
    padding:12px 4px 10px;
    text-decoration:none;
    border-bottom:3px solid transparent
    }
.site-nav a:
    hover,
.site-nav a.active{
    color:var(--blue);
    border-color:var(--blue)
    }
.menu-button {
    margin-left: auto;
    display: none;
    align-items: center;
    gap: .5rem;
}

.hamburger {
    font-size: 1.4rem;
    line-height: 1;
}

@media (max-width: 600px) {

    .menu-text {
        display: none;
    }

}
.site-main{
    display:grid;grid-template-columns:1fr;
    gap:18px;padding:18px;
    min-height:calc(100vh - 226px);
    background:linear-gradient(#8b765c,#745f49)
    }
.world-window{
    position:relative;
    min-height:690px;
    height:100%;
    overflow:hidden;
    background:#bdddf1;
    border:14px solid var(--wood);
    border-radius:18px;
    box-shadow:inset 0 0 0 5px #201912,inset 0 0 0 8px #9e805d,0 16px 38px #0004
    }
.window-titlebar{
    height:34px;padding:0 12px;
    display:flex;align-items:center;
    justify-content:space-between;
    color:#eadfce;
    background:var(--wood2);
    font:.9rem var(--hand)
    }
.scene{
    position:absolute;
    inset:34px 0 0;
    overflow:hidden;
    padding:clamp(34px,5vw,76px);
    background:radial-gradient(circle at 75% 25%,#fff9,transparent 28%),linear-gradient(#9fd1ee 0 62%,#6a8b50 62%)
    }
.scene:before{
    content:"";
    position:absolute;
    inset:52% -10% -20%;
    z-index:0;
    background:linear-gradient(#7ea467,#456642);
    clip-path:polygon(0 28%,12% 12%,28% 34%,46% 9%,64% 35%,82% 4%,100% 24%,100% 100%,0 100%)
    }
.scene-copy{
    position:relative;
    z-index:4;
    width:min(48%,570px);
    margin-left:31%
    }
.eyebrow{
    margin:0 0 10px;
    font:1rem var(--hand)
    }
.scene h1{
    margin:0 0 22px;
    font:700 clamp(2rem,4vw,4.6rem)/.97 var(--hand)
    }
.scene-body{
    font-size:clamp(1rem,1.25vw,1.22rem);
    line-height:1.48
    }
.scene-about .about-monitor {
    display: block;
}

/* ---------------------------------------------------------
   ABOUT GRUMPY — monitor overlay
   --------------------------------------------------------- */

.about-monitor {
    display: none;

    position: absolute;
    z-index: 10;

    /*
     * These four values place the HTML inside
     * the actual black monitor screen.
     *
     * Fine tuning will probably be +/- 0.5%.
     */
    left: 24.8%;
    top: 13.2%;
    width: 48.0%;
    height: 43.0%;

    padding: 3.2% 4.0%;

    color: #e8a42b;
    background: transparent;

    font-family: "Courier New", monospace;
    text-align: center;

    /*
     * The left side needs to sit slightly lower
     * than the right side.
     *
     * Negative rotation drops the left.
     */
    transform: rotate(-1.45deg);
    transform-origin: center center;

    cursor: zoom-in;
}

/* Only show it on the About view */
.scene-about .about-monitor {
    display: block;
}

.about-monitor h2 {
    margin: 0 0 7%;

    font-family: Georgia, serif;
    font-size: clamp(1.45rem, 2.6vw, 2.8rem);
    font-weight: 700;
    line-height: 1.05;
}

.about-monitor p {
    margin: 0;
    color: inherit;
    font-family: inherit;
    line-height: 1.4;
}

.about-monitor-content {
    position: relative;

    width: 100%;
    height: 100%;

    /*
     * Hold the bottom-right corner effectively still
     * while adjusting the apparent angle of the left side.
     */
    transform-origin: right bottom;

    transform:
        perspective(1200px)
        rotateY(14deg);
}

.about-subtitle {
    margin: 0;

    font-size: clamp(.9rem, 1.45vw, 1.5rem);
    line-height: 1.35;
}

.about-monitor .about-instruction {
    margin-top: 11%;
}

.about-enlarge {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 5%;

    margin: 0;

    font-size: clamp(.72rem, 1vw, 1rem);
    opacity: .75;
}

.primary-button,
.send-button{
    border:0;
    border-radius:8px;
    color:#fff;
    background:linear-gradient(#123d5d,#082a43);
    padding:13px 22px;
    cursor:pointer
    }
.cloud{
    position:absolute;
    z-index:1;
    top:9%;
    right:7%;
    width:34%;
    height:22%;
    filter:drop-shadow(0 10px 10px #0003)
    }
.cloud:before,
.cloud:after{
    content:"";
    position:absolute;
    background:#46515a;
    border-radius:50%;
    box-shadow:65px -20px 0 18px #3a454e,130px 2px 0 30px #535e66,198px -8px 0 15px #323c44
    }
.cloud:before{
    inset:42px auto auto 0;
    width:150px;
    height:75px
    }
.cloud:after{
    inset:18px 35px auto auto;
    width:170px;
    height:90px
    }
.cloud span{
    position:absolute;
    top:80%;
    left:58%;
    width:6px;
    height:240px;
    background:#1a1c1d;transform:rotate(-8deg)
    }
.computer{
    position:absolute;
    z-index:3;
    right:6%;
    bottom:12%;
    width:33%;
    min-width:250px
    }
.monitor{
    width:56%;
    margin-left:auto;
    padding:24px 18px;
    color:#83e55c;
    background:#0b1719;
    border:12px solid #262b2c;
    border-radius:8px;font:clamp(.95rem,1.25vw,1.25rem)/1.25 monospace
    }
.desk{
    height:90px;
    margin-top:12px;
    background:#74502d;
    border:7px solid #3c2919
    }
.blue-bunny{
    position:absolute;
    z-index:5;
    right:3%;
    bottom:1%;
    width:170px;
    height:145px
    }
.blue-bunny .hole{
    position:absolute;
    right:0;
    bottom:0;
    width:145px;
    height:50px;
    border-radius:50%;
    background:radial-gradient(ellipse,#100d0b 0 52%,#59452d 54% 70%,transparent 72%)
    }
.blue-bunny .body{
    position:absolute;
    right:22px;
    bottom:22px;
    width:85px;
    height:63px;
    border-radius:55% 42% 48% 45%;
    background:#4d9bd3;
    transform:rotate(24deg)
    }
.blue-bunny .tail{
    position:absolute;
    right:86px;
    bottom:57px;
    width:35px;
    height:35px;
    border-radius:50%;
    background:#d8edf8
    }
.blue-bunny .ear{
    position:absolute;
    bottom:70px;
    width:25px;
    height:70px;
    background:#4d9bd3;
    border-radius:60% 60% 20% 20%;transform-origin:bottom
    }
.blue-bunny .one{
    right:34px;
    transform:rotate(31deg)
    }
.blue-bunny .two{
    right:58px;
    transform:rotate(12deg)
    }
.blue-bunny span{
    position:absolute;
    right:125px;
    bottom:15px;
    width:110px;
    padding:8px;
    color:#24180d;
    background:#b88c4d;
    border:3px solid #513519;
    font:700 .72rem/1.15 var(--hand);
    text-align:center;transform:rotate(-3deg)
    }
.chat-panel{
    padding:clamp(24px,3vw,42px);
    background:linear-gradient(145deg,#fffdf8,var(--paper));
    border:3px solid #281f1833;
    border-radius:16px;box-shadow:0 16px 38px #0004
    }
.chat-panel header{
    padding-bottom:20px;
    border-bottom:1px solid #c9bca9
    }
.chat-panel h2{
    margin:0 0 16px;
    font:700 clamp(1.7rem,2vw,2.2rem) var(--hand)
    }
.chat-panel p{
    line-height:1.45
    }
.conversation{
    min-height:190px;
    padding:20px 0
    }
.message{
    max-width:88%;
    padding:12px 15px;
    border-radius:14px;
    background:#dbe8f3
    }
.message p{
    margin:4px 0 0
    }
.message.you{
    margin:14px 0 0 auto;
    background:#d8e7b4
    }
.chat-form{
    display:grid;
    gap:12px
    }
.chat-form label{
    display:grid;
    gap:5px;
    color:#53616b;
    font-size:.9rem
    }
.chat-form input,
.chat-form textarea{
    width:100%;
    padding:12px 13px;
    color:var(--ink);
    background:#fff9;
    border:1px solid #c6b9a8;
    border-radius:8px
    }
.send-button{
    width:72%;
    justify-self:center
    }
.chat-status{
    min-height:1.2em;
    margin:0;
    text-align:center;
    color:#4a6541
    }
.privacy-note{
    color:#68737b;
    font-size:.82rem;
    text-align:center
    }
.site-footer{
    min-height:112px;
    padding:20px clamp(24px,4vw,48px);
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    align-items:center;
    gap:26px;
    color:#f5f6f6;
    background:linear-gradient(100deg,#06131d,#091d2b)
    }
.site-footer p{margin:0;line-height:1.45}.phone{text-align:center}.phone strong{font:1.7rem var(--hand)}.footer-links{text-align:right}.footer-links a{color:var(--blue);text-decoration:none}.venetian-blind{position:absolute;z-index:30;inset:34px 0 0;pointer-events:none;opacity:0}.venetian-blind:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,#d5d0c6 0,#d5d0c6 34px,#807a72 34px,#807a72 38px);transform-origin:top;transform:scaleY(.04);filter:drop-shadow(0 5px 4px #0005)}.venetian-blind.active{opacity:1}.venetian-blind.closing:before{animation:blind-close .52s ease-in forwards}.venetian-blind.opening:before{animation:blind-open .56s ease-out forwards}@keyframes blind-close{from{transform:scaleY(.04)}to{transform:scaleY(1)}}@keyframes blind-open{from{transform:scaleY(1)}to{transform:scaleY(.04)}}.scene-about{background:linear-gradient(#d8c8a8 0 62%,#7d5c3e 62%)}.scene-girls{background:linear-gradient(#94cdec 0 58%,#719353 58%)}.scene-rabbit-holes{background:linear-gradient(#b59b72 0 60%,#6d4b2e 60%)}.scene-faq{color:#fff;background:radial-gradient(circle at 50% 28%,#fff7c9d9 0 14%,transparent 35%),#141516}.scene-photos{background:linear-gradient(#cab89c 0 65%,#826749 65%)}.scene-now{background:linear-gradient(#c6d9df 0 55%,#74614a 55%)}.scene-contact{background:linear-gradient(#a9c7dd 0 62%,#7d9163 62%)}@media(max-width:1080px){.site-main{grid-template-columns:1fr}.chat-panel{max-width:760px;width:100%;justify-self:center}}
@media(max-width:820px){
    .site-header {
        flex-wrap: wrap;
    }
    .menu-button {
        display: flex;
        margin-left: auto;
    }
    .site-nav {
        display: none;
        width: 100%;
        justify-content: flex-start;
    }
    .site-nav.open {
        display: flex;
    }
   .scene-copy{width:64%;margin-left:0}
   .site-footer{grid-template-columns:1fr;text-align:center}
   .footer-links{text-align:center}}
@media(max-width:600px){.site-main{padding:9px}.world-window{min-height:680px;border-width:8px}.scene{padding:30px 22px}.scene-copy{width:100%}.scene h1{font-size:2.45rem}.cloud{top:46%;right:2%;width:70%;opacity:.8}.computer{width:62%;bottom:12%}.blue-bunny{transform:scale(.78);transform-origin:right bottom}.send-button{width:100%}}
.site-header {
    display: flex;
    align-items: center;
}

/* HOME VIEW 01 — approved illustrated scene */
.scene-home {
  padding:0;
/*  background:#19140f url("/images/home-view-01.png") center center / cover no-repeat; */
  background:#19140f url("/images/home-view-01.png")
     center center / contain no-repeat;
}
.scene-home:before,
.scene-home .scene-copy,
.scene-home .cloud,
.scene-home .computer,
.scene-home .blue-bunny {display:none;}
.home-hotspot{display:none;position:absolute;z-index:12;left:4.1%;top:62.2%;width:17%;height:7.2%;border-radius:12px;cursor:pointer;}
.scene-home .home-hotspot{display:block;}
.home-hotspot:focus-visible{outline:4px solid #69b8ef;outline-offset:3px;background:#69b8ef22;}
@media(max-width:820px){.scene-home{background-position:44% center}.home-hotspot{left:3.8%;top:62%;width:22%;height:7.5%}}
@media(max-width:600px){.scene-home{background-position:48% center}.home-hotspot{left:2%;top:61%;width:30%;height:8%}}
.conversation {
    max-height: 320px;
    overflow-y: auto;

    padding: 20px 4px 20px 0;
    margin-bottom: 18px;

    scrollbar-width: thin;
}

/* ABOUT GRUMPY VIEW 01 */
.scene-about {
    padding: 0;
 /*   background:
        #19140f
        url("/images/about-view-01.png")
        center center / cover no-repeat; */
    background:#19140f url("/images/about-view-01.png")
               center center / contain no-repeat;
}

.scene-about:before,
.scene-about .scene-copy,
.scene-about .cloud,
.scene-about .computer,
.scene-about .blue-bunny {
    display: none;
}



/* ---------------------------------------------------------
   THE GIRLS — API driven cards
   --------------------------------------------------------- */

.girls-content,
.girl-detail {
    display: none;
}

.scene-girls .girls-content {
    display: block;
}

.scene-girls {
    padding: 0;
}

.scene-girls:before,
.scene-girls .scene-copy,
.scene-girls .cloud,
.scene-girls .computer,
.scene-girls .blue-bunny,
.scene-girls .about-monitor {
    display: none;
}

.girls-content {
    position: absolute;
    inset: 0;
    z-index: 8;
    padding: 5% 6%;
}

.girls-status {
    margin: 0;
    padding: 10px 14px;
    width: fit-content;
    max-width: 80%;
    color: #fff;
    background: #071722d9;
    border-radius: 9px;
    font-family: var(--hand);
}

.girls-list {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-end;
    margin-top: 18px;
}

.girl-thumb {
    width: 150px;
    padding: 10px;
    border: 0;
    border-radius: 16px;
    color: #f8ead1;
    background: #4e301fef;
    box-shadow: 0 9px 20px #0005;
    cursor: pointer;
    text-align: center;
}

.girl-thumb:hover,
.girl-thumb:focus-visible {
    transform: translateY(-2px);
    outline: 3px solid #69b8ef;
    outline-offset: 2px;
}

.girl-thumb img {
    display: block;
    width: 105px;
    height: 105px;
    margin: 0 auto 8px;
    object-fit: cover;
    border: 4px solid #ead8b5;
    border-radius: 50%;
    background: #ead8b5;
}

.girl-thumb-name {
    display: block;
    font: 700 1.15rem var(--hand);
}

.scene-girls .girl-detail:not([hidden]) {
    display: flex;
}

.girl-detail {
    position: absolute;
    inset: 0;
    z-index: 20;
    align-items: center;
    justify-content: center;
    padding: 3%;
    background: #0007;
}

.girl-detail-card {
    width: min(92%, 600px);
    overflow: hidden;
    color: #24180f;
    background: #edd8ad;
    border: 2px solid #8a6845;
    border-radius: 20px;
    box-shadow: 0 18px 45px #0008;
}

.girl-detail-header {
    position: relative;
    min-height: 54px;
    padding: 8px 55px 8px 18px;
    color: #f3e1bc;
    background: #50301f;
    text-align: center;
}

.girl-detail-header h2 {
    margin: 0;
    font: 700 2rem/1.15 var(--hand);
}

.girl-detail-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    color: #f3e1bc;
    background: transparent;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.girl-detail-main {
    display: grid;
    grid-template-columns: 145px 1fr;
    gap: 18px;
    align-items: center;
    padding: 22px 28px;
}

.girl-detail-photo-wrap {
    min-height: 125px;
}

.girl-detail-photo {
    width: 125px;
    height: 125px;
    object-fit: cover;
    border: 4px solid #765a3d;
    border-radius: 50%;
    box-shadow: 0 5px 10px #0004;
}

.girl-detail-subtitle {
    margin: 0 0 14px;
    font-size: 1.1rem;
}

.girl-detail-text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.35;
    white-space: pre-wrap;
}

.girl-detail-footer {
    padding: 13px 28px 16px 48px;
    border-top: 2px solid #9b7953;
    color: #b32424;
    font-size: 1.15rem;
    font-style: italic;
    line-height: 1.35;
    white-space: pre-wrap;
}

.girl-detail-footer:empty {
    display: none;
}

@media(max-width:600px) {
    .girls-content {
        padding: 20px;
    }

    .girl-thumb {
        width: 125px;
    }

    .girl-thumb img {
        width: 88px;
        height: 88px;
    }

    .girl-detail-main {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .girl-detail-photo {
        margin: 0 auto;
    }

    .girl-detail-footer {
        padding-left: 22px;
    }
}

/* Home + About follow their native 1377 x 1142 artwork ratio */
.world-window:has(.scene-home),
.world-window:has(.scene-about) {
    height: auto;
    min-height: 0;
}

.scene.scene-home,
.scene.scene-about {
    position: relative;
    inset: auto;
    aspect-ratio: 1377 / 1142;
    min-height: 0;
}