@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');

:root{
    --bg:#0d1824;
    --bg-2:#13253a;
    --bg-3:#1e3550;
    --sun:#ffb04a;
    --sun-2:#ff7e3d;
    --water:#173b61;
    --water-2:#0e2844;
    --mountain-back:#233448;
    --mountain-mid:#172534;
    --shore:#0d1723;
    --window-bg:#f2eee6;
    --window-bg-2:#ded6c9;
    --window-line:#0d1723;
    --window-shadow:#0c0f14;
    --muted:#66615b;
    --field:#efebe4;
    --field-line:#8f8a83;
    --submit:#5d9d43;
    --submit-2:#3e7f31;
    --submit-dark:#25411f;
    --light:#fffdfa;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
    font-family:Inter,Arial,sans-serif;
    background:var(--bg);
    color:#141414;
    overflow-x:hidden;
}

.scene{
    position:fixed;
    inset:0;
    overflow:hidden;
    background:linear-gradient(to bottom, #0e1d2f, #0c1723 72%, #08111a);
    z-index:0;
}

.scene-sky{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 50% 12%, rgba(255,175,77,.18), transparent 22%),
        linear-gradient(to bottom, #1b2f45 0%, #243b59 16%, #32516e 28%, #5a4a59 44%, #244362 60%, #10263f 76%, #0b1724 100%);
}

.scene-stars{
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle at 12% 19%, rgba(255,255,255,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 28% 11%, rgba(255,255,255,.65) 0 1px, transparent 2px),
        radial-gradient(circle at 42% 8%, rgba(255,255,255,.8) 0 1px, transparent 2px),
        radial-gradient(circle at 74% 13%, rgba(255,255,255,.75) 0 1px, transparent 2px),
        radial-gradient(circle at 83% 22%, rgba(255,255,255,.7) 0 1px, transparent 2px),
        radial-gradient(circle at 92% 16%, rgba(255,255,255,.8) 0 1px, transparent 2px);
    opacity:.55;
}

.scene-sun{
    position:absolute;
    width:min(15vw,220px);
    aspect-ratio:1;
    border-radius:50%;
    background:
        linear-gradient(to bottom, rgba(255,255,255,.3), transparent 18%),
        radial-gradient(circle at 50% 40%, #ffd77b 0%, #ffb04b 42%, #ff7e3d 72%, rgba(255,126,61,0) 74%);
    right:19%;
    top:30%;
    box-shadow:0 0 70px rgba(255,176,74,.35);
}

.scene-cloud{
    position:absolute;
    height:12px;
    background:rgba(26,29,42,.38);
    border-radius:99px;
    filter:blur(.2px);
}
.scene-cloud::before,
.scene-cloud::after{
    content:"";
    position:absolute;
    height:12px;
    background:rgba(26,29,42,.38);
    border-radius:99px;
}
.scene-cloud-a{width:180px;left:18%;top:19%}
.scene-cloud-a::before{width:74px;left:15px;top:-8px}
.scene-cloud-a::after{width:86px;right:18px;top:-4px}
.scene-cloud-b{width:240px;right:16%;top:22%}
.scene-cloud-b::before{width:82px;left:32px;top:-10px}
.scene-cloud-b::after{width:116px;right:25px;top:-6px}

.scene-mountain{
    position:absolute;
    left:0;
    right:0;
    background-repeat:no-repeat;
}
.scene-mountain-back{
    bottom:30%;
    height:28%;
    background:
        polygon(0 100%, 0 72%, 8% 55%, 16% 68%, 25% 45%, 35% 63%, 47% 39%, 57% 62%, 67% 46%, 76% 59%, 86% 40%, 100% 64%, 100% 100%);
    clip-path:polygon(0 100%,0 72%,8% 55%,16% 68%,25% 45%,35% 63%,47% 39%,57% 62%,67% 46%,76% 59%,86% 40%,100% 64%,100% 100%);
    background-color:var(--mountain-back);
}
.scene-mountain-mid{
    bottom:24%;
    height:24%;
    clip-path:polygon(0 100%,0 86%,11% 62%,22% 73%,33% 52%,44% 78%,56% 59%,68% 82%,80% 60%,90% 69%,100% 58%,100% 100%);
    background:linear-gradient(to bottom, #1a2533, #101a26);
}

.scene-water{
    position:absolute;
    left:0;right:0;bottom:0;
    height:30%;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.06) 0 2px, rgba(255,255,255,0) 2px 12px),
        linear-gradient(to bottom, var(--water) 0%, var(--water-2) 70%, #09131d 100%);
}

.scene-reflection{
    position:absolute;
    width:min(3vw,58px);
    height:27%;
    right:24.3%;
    bottom:4%;
    background:
        linear-gradient(to bottom, rgba(255,216,123,.95), rgba(255,176,74,.72), rgba(255,126,61,.28), rgba(255,126,61,0));
    filter:blur(1px);
    box-shadow:
        0 0 24px rgba(255,176,74,.38),
        0 0 55px rgba(255,126,61,.12);
}

.scene-shore{
    position:absolute;
    bottom:0;
    background:var(--shore);
}
.scene-shore-left{
    left:-5%;
    width:38%;
    height:27%;
    clip-path:polygon(0 100%,0 42%,12% 34%,21% 40%,26% 33%,37% 44%,46% 28%,56% 39%,67% 27%,75% 35%,82% 24%,100% 34%,100% 100%);
}
.scene-shore-right{
    right:-5%;
    width:26%;
    height:22%;
    clip-path:polygon(0 100%,0 40%,16% 31%,28% 41%,43% 27%,58% 38%,72% 24%,84% 33%,100% 22%,100% 100%);
}

.scene-grid{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to right, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.02) 1px, transparent 1px);
    background-size:40px 40px;
    opacity:.35;
    mask-image:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.4) 25%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 100%);
}

.scene-vignette{
    position:absolute;
    inset:0;
    background:
        linear-gradient(to right, rgba(7,14,22,.96), rgba(7,14,22,.18) 18%, rgba(7,14,22,0) 32%, rgba(7,14,22,0) 68%, rgba(7,14,22,.18) 82%, rgba(7,14,22,.96)),
        linear-gradient(to bottom, rgba(7,14,22,.22), rgba(7,14,22,0) 20%, rgba(7,14,22,0) 78%, rgba(7,14,22,.54));
}

.site-wrap{
    position:relative;
    z-index:2;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:56px 20px;
}

.window-shell{
    width:min(760px,100%);
}

.retro-window{
    background:var(--window-bg);
    border:3px solid var(--window-line);
    box-shadow:
        0 0 0 2px rgba(255,255,255,.06),
        8px 8px 0 rgba(0,0,0,.42);
}

.title-bar{
    min-height:48px;
    background:linear-gradient(to bottom, #2e90c2, #1f71a3);
    color:#f8fdff;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 18px;
    border-bottom:3px solid var(--window-line);
    font:500 18px/1 "IBM Plex Mono",monospace;
}
.title-controls{
    display:flex;
    gap:12px;
    font-size:22px;
    line-height:1;
}
.title-controls i{font-style:normal}

.window-body{
    padding:26px 28px 28px;
}

.brand-row{
    display:flex;
    align-items:center;
    gap:22px;
}

.brand-copy h1{
    margin:0;
    font:400 clamp(34px,5vw,64px)/1 "Press Start 2P",cursive;
    letter-spacing:-.04em;
    color:#1d334d;
}
.brand-copy h2{
    margin:14px 0 0;
    font:400 clamp(14px,2vw,24px)/1.3 "Press Start 2P",cursive;
    color:#5f6770;
}

.pixel-house{
    position:relative;
    width:126px;
    height:102px;
    flex:0 0 126px;
}
.roof{
    position:absolute;
    width:72px;height:34px;
    left:8px;top:3px;
    background:#f39a25;
    border:3px solid #36322d;
    transform:skewY(-27deg);
    box-shadow:12px 0 0 #c9781c;
}
.house-body{
    position:absolute;
    width:76px;height:62px;
    left:10px;top:31px;
    background:#f19721;
    border:3px solid #36322d;
    box-shadow:10px 8px 0 #766f63;
}
.house-body .window{
    position:absolute;
    width:14px;height:16px;
    background:#95def0;
    border:3px solid #36322d;
}
.window-1{left:9px;top:8px}
.window-2{left:32px;top:8px}
.window-3{left:9px;top:33px}
.window-4{left:32px;top:33px}
.awning{
    position:absolute;
    width:24px;height:13px;
    right:-7px;top:24px;
    background:#df462a;
    border:3px solid #36322d;
}
.path{
    position:absolute;
    width:30px;height:24px;
    right:-2px;bottom:-20px;
    background:#bba27b;
    border:3px solid #36322d;
    transform:skewX(-30deg);
}
.tree{
    position:absolute;
    width:28px;height:28px;
    border-radius:50%;
    background:#6f9e39;
    border:3px solid #36322d;
}
.tree::after{
    content:"";
    position:absolute;
    width:8px;height:14px;
    background:#6c4b2f;
    left:7px;bottom:-12px;
    border-left:3px solid #36322d;
    border-right:3px solid #36322d;
}
.tree-a{right:-43px;top:4px}
.tree-b{right:-29px;top:28px;transform:scale(.92)}

.solid-line{
    height:2px;
    margin:18px 0 20px;
    background:#9299a3;
}
.tagline{
    margin:0 0 20px;
    text-align:center;
    font:500 clamp(14px,2.1vw,18px)/1.5 "IBM Plex Mono",monospace;
    color:#232933;
}

.tag-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px 14px;
}
.tag-button{
    min-width:112px;
    min-height:42px;
    padding:8px 14px;
    border:2px solid #7f7c77;
    background:linear-gradient(to bottom, #faf7f0, #e4ddd1);
    color:#222831;
    font:600 14px/1 "IBM Plex Mono",monospace;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.95),
        3px 3px 0 rgba(0,0,0,.18);
    cursor:pointer;
}
.tag-button.wide{min-width:150px}
.tag-button:hover{
    transform:translate(-1px,-1px);
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.95),
        4px 4px 0 rgba(0,0,0,.18);
}
.tag-button:active{
    transform:translate(1px,1px);
    box-shadow:inset 1px 1px 0 rgba(255,255,255,.95), 2px 2px 0 rgba(0,0,0,.18);
}

.dotted-line{
    height:0;
    margin:22px 0 18px;
    border-top:3px dotted #b8b2a8;
}

.retro-form{
    display:grid;
    gap:12px;
}
.form-row{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:18px;
    align-items:center;
}
.form-row label{
    font:600 clamp(14px,2vw,18px)/1.2 "IBM Plex Mono",monospace;
    color:#1d232d;
}
.form-row input,
.form-row textarea{
    width:100%;
    border:2px solid var(--field-line);
    background:var(--field);
    color:#353535;
    padding:12px 14px;
    outline:none;
    font:500 15px/1.4 "IBM Plex Mono",monospace;
    box-shadow:
        inset 1px 1px 0 rgba(255,255,255,.85),
        3px 3px 0 rgba(0,0,0,.18);
}
.form-row input::placeholder,
.form-row textarea::placeholder{
    color:#9b9790;
}
.form-row input:focus,
.form-row textarea:focus{
    border-color:#6f6c68;
    background:#f5f0e7;
}
.form-row-message{
    align-items:start;
}
.form-row-message label{
    padding-top:10px;
}
.form-row textarea{
    resize:vertical;
    min-height:112px;
}

.submit-row{
    padding-left:188px;
    padding-top:4px;
}
.submit-button{
    min-width:240px;
    min-height:56px;
    border:3px solid var(--submit-dark);
    background:linear-gradient(to bottom, var(--submit), var(--submit-2));
    color:#f8fff6;
    font:700 16px/1 "Press Start 2P",cursive;
    text-shadow:2px 2px 0 rgba(0,0,0,.2);
    box-shadow:
        inset 2px 2px 0 rgba(255,255,255,.20),
        inset -2px -2px 0 rgba(0,0,0,.16),
        5px 5px 0 #20301d;
    cursor:pointer;
}
.submit-button span{
    font-size:14px;
    margin-left:10px;
}
.submit-button:hover{
    transform:translate(-1px,-1px);
    filter:brightness(1.02);
}
.submit-button:active{
    transform:translate(2px,2px);
    box-shadow:
        inset 2px 2px 0 rgba(0,0,0,.16),
        2px 2px 0 #20301d;
}

.popup-overlay{
    position:fixed;
    inset:0;
    z-index:15;
    background:rgba(7,12,18,.38);
    display:grid;
    place-items:center;
    padding:20px;
}
.popup-window{
    width:min(360px,100%);
    background:var(--window-bg);
    border:3px solid var(--window-line);
    box-shadow:8px 8px 0 rgba(0,0,0,.42);
}
.popup-title-bar{
    min-height:42px;
    padding:8px 14px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(to bottom, #2e90c2, #1f71a3);
    color:#fff;
    border-bottom:3px solid var(--window-line);
    font:500 16px/1 "IBM Plex Mono",monospace;
}
.popup-close{
    border:0;
    background:transparent;
    color:#fff;
    font-size:26px;
    line-height:1;
    cursor:pointer;
}
.popup-body{
    padding:18px 16px 16px;
}
.popup-body p{
    margin:0 0 16px;
    color:#2a2d33;
    font:500 14px/1.65 "IBM Plex Mono",monospace;
}
.popup-ok{
    min-width:92px;
    min-height:40px;
    border:3px solid var(--submit-dark);
    background:linear-gradient(to bottom, var(--submit), var(--submit-2));
    color:#fff;
    font:700 14px/1 "IBM Plex Mono",monospace;
    box-shadow:3px 3px 0 #20301d;
    cursor:pointer;
}

.page-message{
    position:fixed;
    left:50%;
    top:18px;
    transform:translateX(-50%);
    z-index:10;
    width:min(92vw,560px);
    border:3px solid var(--window-line);
    background:#efe9dd;
    padding:12px 16px;
    box-shadow:4px 4px 0 rgba(0,0,0,.34);
    font:600 14px/1.5 "IBM Plex Mono",monospace;
}
.page-message.success{background:#dfeeda}
.page-message.error{background:#f5ded7}

.ambient{
    position:fixed;
    color:rgba(241,247,253,.86);
    z-index:1;
    text-transform:uppercase;
    letter-spacing:.32em;
    font:500 11px/1.8 "IBM Plex Mono",monospace;
    pointer-events:none;
}
.ambient span{
    margin-right:8px;
}
.ambient i{
    display:block;
    width:42px;
    height:1px;
    background:rgba(255,255,255,.88);
    margin:10px 0 14px;
}
.ambient p{
    margin:0;
    color:rgba(235,239,244,.72);
    letter-spacing:.17em;
    font-size:12px;
    line-height:1.7;
}
.ambient-top-right{
    right:56px;
    top:32px;
    text-align:left;
}
.ambient-bottom-left{
    left:56px;
    bottom:34px;
}
.honeypot{
    position:absolute!important;
    left:-10000px!important;
    opacity:0!important;
    width:1px!important;
    height:1px!important;
}

@media (max-width: 980px){
    .ambient{display:none}
}

@media (max-width: 760px){
    .site-wrap{
        padding:20px 12px 28px;
    }
    .window-body{
        padding:18px 16px 20px;
    }
    .brand-row{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:12px;
    }
    .brand-copy h1{
        font-size:30px;
        line-height:1.2;
    }
    .brand-copy h2{
        font-size:13px;
        margin-top:10px;
    }
    .tagline{
        font-size:14px;
        line-height:1.6;
    }
    .tag-grid{
        gap:10px;
    }
    .tag-button,
    .tag-button.wide{
        min-width:calc(50% - 10px);
        flex:1 1 calc(50% - 10px);
        font-size:12px;
        padding:10px 8px;
    }
    .form-row{
        grid-template-columns:1fr;
        gap:8px;
    }
    .form-row label{
        font-size:15px;
    }
    .submit-row{
        padding-left:0;
    }
    .submit-button{
        width:100%;
        min-width:0;
        font-size:14px;
    }
    .title-bar{
        font-size:15px;
        padding:8px 12px;
    }
    .title-controls{
        gap:8px;
        font-size:18px;
    }
}

@media (max-width: 520px){
    .scene-sun{
        width:90px;
        right:10%;
        top:32%;
    }
    .page-message{
        top:10px;
        font-size:12px;
        padding:10px 12px;
    }
    .tag-button,
    .tag-button.wide{
        min-width:100%;
        flex-basis:100%;
    }
    .pixel-house{
        transform:scale(.88);
    }
}