/* =========================================================
   TALVAREN STUDIOS V2
   BASE STYLES
========================================================= */

:root{

    --talvaren-ink:#211b14;
    --talvaren-brown:#4b3a22;
    --talvaren-brown-light:#654c2c;

    --talvaren-parchment:#ded0ad;
    --talvaren-parchment-light:#f5ead4;
    --talvaren-gold:#d6b66f;

    --talvaren-shell:#171b21;
    --talvaren-shell-soft:#222933;
    --talvaren-shell-border:rgba(235,217,177,.24);

    --talvaren-text:#f5ead4;
    --talvaren-muted:#c8bda7;

    --talvaren-content-width:1180px;

    --primary-rail-width:150px;
    --secondary-rail-width:250px;

    --mobile-primary-height:72px;
    --mobile-secondary-height:58px;
    --mobile-viewport-shift-y:0px;

}

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

*,
*::before,
*::after{

    box-sizing:border-box;

}

html{

    min-height:100%;

    scroll-behavior:smooth;

}

body{

    min-height:100vh;
    min-height:100dvh;

    margin:0;

    color:var(--talvaren-text);

    background:#0f1318;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    line-height:1.6;

    overflow-x:hidden;

}

img,
picture,
video,
canvas,
svg{

    display:block;

    max-width:100%;

}

button,
input,
textarea,
select{

    font:inherit;

}

button,
a{

    -webkit-tap-highlight-color:transparent;

}

button{

    border:0;

}

a{

    color:inherit;

}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure{

    margin-top:0;

}

h1,
h2,
h3,
h4{

    line-height:1.15;

}

ul,
ol{

    padding-left:1.4rem;

}

/* =========================================================
   ACCESSIBILITY
========================================================= */

.visually-hidden{

    position:absolute !important;

    width:1px !important;
    height:1px !important;

    padding:0 !important;
    margin:-1px !important;

    overflow:hidden !important;

    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;

    border:0 !important;

}

.skip-link{

    position:fixed;
    top:10px;
    left:10px;

    z-index:9999;

    padding:10px 16px;

    color:var(--talvaren-ink);
    background:var(--talvaren-parchment-light);

    border-radius:8px;

    text-decoration:none;
    font-weight:bold;

    transform:translateY(-150%);

}

.skip-link:focus{

    transform:translateY(0);

}

:focus-visible{

    outline:3px solid var(--talvaren-gold);
    outline-offset:3px;

}

/* =========================================================
   WALLPAPER
========================================================= */

.site-wallpaper{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;
    height:100dvh;

    z-index:-3;

    background:
        linear-gradient(
            rgba(8,12,16,.18),
            rgba(8,12,16,.18)
        ),
        url("../images/wallpaper/Talvaren_Wallpaper.PNG")
        center center / cover
        no-repeat;

}

.site-wallpaper::after{

    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            transparent 25%,
            rgba(9,12,16,.32) 100%
        );

}

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

.page-title{

    margin-bottom:18px;

    color:var(--talvaren-parchment-light);

    font-size:clamp(2.2rem,6vw,4.8rem);

    text-shadow:
        0 3px 12px rgba(0,0,0,.62);

}

.page-subtitle{

    max-width:760px;

    margin-bottom:28px;

    color:var(--talvaren-parchment-light);

    font-size:clamp(1.05rem,2vw,1.35rem);
    line-height:1.75;

    text-shadow:
        0 2px 8px rgba(0,0,0,.72);

}

.section-title{

    margin-bottom:18px;

    color:var(--talvaren-ink);

    font-size:clamp(1.7rem,4vw,2.8rem);

}

/* =========================================================
   SHARED CONTENT SURFACES
========================================================= */

.content-panel{

    width:min(
        var(--talvaren-content-width),
        100%
    );

    padding:clamp(22px,4vw,42px);

    color:var(--talvaren-ink);

    background:
        linear-gradient(
            180deg,
            rgba(235,222,188,.96),
            rgba(207,188,145,.94)
        );

    border:
        2px solid
        rgba(75,58,34,.42);

    border-radius:14px;

    box-shadow:
        0 14px 38px
        rgba(0,0,0,.38);

}

.content-panel p{

    line-height:1.75;

}

.content-panel a{

    color:#493515;

    font-weight:bold;

}

.content-panel a:hover{

    color:#75541e;

}

.glass-panel{

    padding:clamp(20px,4vw,36px);

    color:var(--talvaren-parchment-light);

    background:
        rgba(28,34,43,.84);

    border:
        1px solid
        var(--talvaren-shell-border);

    border-radius:14px;

    box-shadow:
        0 12px 32px
        rgba(0,0,0,.34);

    backdrop-filter:blur(8px);

}

/* =========================================================
   SHARED BUTTONS
========================================================= */

.talvaren-button{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    min-height:46px;

    padding:11px 20px;

    color:var(--talvaren-parchment-light);
    background:var(--talvaren-brown);

    border:
        1px solid
        rgba(245,234,212,.32);

    border-radius:9px;

    text-decoration:none;
    font-weight:bold;

    cursor:pointer;

    transition:
        background .18s ease,
        transform .18s ease,
        border-color .18s ease;

}

.talvaren-button:hover{

    background:var(--talvaren-brown-light);

    border-color:
        rgba(245,234,212,.55);

    transform:translateY(-1px);

}

.talvaren-button:active{

    transform:translateY(0);

}

/* =========================================================
   DOCUMENT CONTENT
========================================================= */

.document-content{

    color:var(--talvaren-ink);

}

.document-content h2{

    margin:
        0
        0
        20px;

}

.document-content h3{

    margin:
        32px
        0
        12px;

}

.document-content p{

    margin-bottom:18px;

}

.document-content li{

    margin-bottom:8px;

}

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

.media-frame{

    overflow:hidden;

    background:#0d1015;

    border:
        2px solid
        rgba(229,207,160,.35);

    border-radius:12px;

    box-shadow:
        0 10px 28px
        rgba(0,0,0,.38);

}

.media-frame img,
.media-frame video{

    width:100%;
    height:auto;

}

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

.centered{

    text-align:center;

}

.full-width{

    width:100%;

}

.no-scroll{

    overflow:hidden;

}

.hidden{

    display:none !important;

}

.stack{

    display:flex;
    flex-direction:column;

    gap:20px;

}

.cluster{

    display:flex;
    flex-wrap:wrap;

    align-items:center;

    gap:12px;

}

.divider{

    width:100%;

    margin:34px 0;

    border:0;
    border-top:
        1px solid
        rgba(75,58,34,.28);

}
.noscript-message{position:fixed;z-index:9999;inset:auto 16px 16px;padding:14px 18px;background:#f4ead5;color:#241b12;border:2px solid #7b5b32;border-radius:8px;box-shadow:0 8px 30px rgba(0,0,0,.35)}