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

:root{

    --red:#F1444E;
    --orange:#FFAE81;
    --sand:#C9947A;

    --bg:#2F324B;
    --bg-dark:#26283D;

    --paper:#F8F2E8;
    --text:#212934;
    --muted:#A6ACC9;

    --shadow:
    rgba(16,18,28,0.42);
}

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

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;
}

body{

    font-family:'Space Grotesk', sans-serif;

    background:
    linear-gradient(
        135deg,
        #2E3148 0%,
        #343857 50%,
        #2A2D43 100%
    );

    color:var(--paper);

    min-height:100vh;

    overflow-x:hidden;

    position:relative;
}

/* =========================
GLOBAL TEXTURE
========================= */

body::before{

    content:"";

    position:fixed;

    inset:0;

    opacity:0.05;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.8) 0.04rem,
        transparent 0.04rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;

    z-index:-1;
}

/* =========================
BACKGROUND GLOWS
========================= */

.background-glow{

    position:fixed;

    border-radius:999rem;

    filter:blur(9rem);

    z-index:-2;

    pointer-events:none;
}

.glow-1{

    width:28rem;
    height:28rem;

    background:
    rgba(241,68,78,0.22);

    top:-12rem;
    left:-12rem;
}

.glow-2{

    width:24rem;
    height:24rem;

    background:
    rgba(255,174,129,0.14);

    bottom:-10rem;
    right:-10rem;
}

/* =========================
TYPOGRAPHY
========================= */

h1,
h2,
h3{

    font-family:'Fredoka', sans-serif;

    font-weight:600;
}

p{

    line-height:1.6;
}

a{

    color:inherit;

    text-decoration:none;
}

button{

    border:none;

    background:none;

    font-family:inherit;

    color:inherit;
}

/* =========================
MEDIA DEFAULTS
========================= */

img,
svg{

    display:block;
}

svg{

    width:1.2rem;
    height:1.2rem;
}

/* =========================
UTILITY
========================= */

.container{

    width:min(100%, 72rem);

    margin-inline:auto;
}

.texture{

    position:absolute;

    inset:0;

    opacity:0.05;

    background-image:
    radial-gradient(
        rgba(255,255,255,0.9) 0.05rem,
        transparent 0.05rem
    );

    background-size:
    0.7rem 0.7rem;

    pointer-events:none;
}

.sketch-border{

    position:absolute;

    inset:0.45rem;

    border:
    0.08rem solid rgba(255,255,255,0.08);

    pointer-events:none;
}

.top-strip{

    position:absolute;

    top:0;
    left:0;

    width:100%;

    height:0.75rem;

    background:
    linear-gradient(
        90deg,
        var(--red),
        var(--orange)
    );
}

.site-footer{

    margin-top:5rem;

    padding:
    2rem 1.5rem 3rem;

    text-align:center;
}

.site-footer p{

    max-width:42rem;

    margin:auto;

    color:
    rgba(255,255,255,0.58);

    font-size:0.95rem;

    line-height:1.8;

    font-weight:500;
}

.footer-contact{

    margin-top:1.5rem;
}

.footer-contact a{

    color:#ffb27d;

    text-decoration:none;

    transition:
    0.15s ease;
}

.footer-contact a:hover{

    opacity:0.8;
}




.tts-warning{

    position: fixed;

    bottom: 1.5rem;

    left: 50%;

    transform:
    translateX(-50%)
    translateY(20px);

    width: min(90%, 26rem);

    padding: 0.95rem 1rem;

    border-radius: 18px;

    background:
    rgba(35,35,55,0.96);

    border:
    1px solid rgba(255,255,255,0.08);

    color:
    rgba(255,255,255,0.82);

    font-size: 0.88rem;

    line-height: 1.5;

    text-align: center;

    backdrop-filter: blur(10px);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.28);

    opacity: 0;

    transition: 0.25s ease;

    z-index: 9999;
}

.tts-warning.show{

    opacity: 1;

    transform:
    translateX(-50%)
    translateY(0);
}

.tts-warning a{

    color:#f7ae7c !important;
    text-decoration: underline;
}