/* -------------------- */
/* Global */
/* -------------------- */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:135px;
}

html,
body{
    margin:0;
    padding:0;

    background-color:#111111;
    background-image:url("images/General_Images/BackgroundPattern/backgroundpattern.png?v=20260727-135901");
    background-repeat:repeat;
    color:white;

    font-family:Arial, Helvetica, sans-serif;
    text-align:center;

    cursor:url("HamishCursor_d.cur"), auto;
}

a,
button,
[role="button"]{
    cursor:url("HamishCursor_p.cur"), pointer;
}

/* -------------------- */
/* Header */
/* -------------------- */

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:135px;

    background-color:#1B1B1B;
    background-image:url("images/General_Images/Header/header_pattern.png");
    background-repeat:repeat;

    display:flex;
    align-items:center;

    z-index:1000;
}

header::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:12px;

    background-image:url("images/General_Images/Header/header_pattern_bottom_v3.png?v=20260730");
    background-repeat:repeat-x;
    background-position:left bottom;
    pointer-events:none;
}

.header-logo{
    width:434px;
    height:116px;
    margin-left:40px;
    margin-right:40px;

    user-select:none;
    -webkit-user-drag:none;
}

.header-nav{
    position:absolute;
    left:50%;
    transform:translate(-50%, 15px);

    display:flex;
    align-items:center;
    gap:25px;
}

.header-button{
    display:block;
    width:200px;
    height:66.6667px;
    flex-shrink:0;
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    user-select:none;
    -webkit-user-drag:none;
}

html .home-button{
    background-image:url("images/General_Images/Home_Button/home_button_d.png");
}

html .home-button:hover{
    background-image:url("images/General_Images/Home_Button/home_button_h.png");
}

.home-button:active{
    background-image:url("images/General_Images/Home_Button/home_button_c.png");
}

.schedule-button{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_d.png");
}

.schedule-button:hover{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_h.png");
}

.schedule-button:active{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_c.png");
}

.about-button{
    background-image:url("images/General_Images/About_Button/About_button_d.png");
}

.about-button:hover{
    background-image:url("images/General_Images/About_Button/About_button_h.png");
}

.about-button:active{
    background-image:url("images/General_Images/About_Button/About_button_c.png");
}

.links-button{
    background-image:url("images/General_Images/Links_Button/Links_button_d.png");
}

.links-button:hover{
    background-image:url("images/General_Images/Links_Button/Links_button_h.png");
}

.links-button:active{
    background-image:url("images/General_Images/Links_Button/Links_button_c.png");
}

.header-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.home-button.is-current{
    background-image:url("images/General_Images/Home_Button/home_button_c.png");
}

.schedule-button.is-current{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_c.png");
}

.about-button.is-current{
    background-image:url("images/General_Images/About_Button/About_button_c.png");
}

.links-button.is-current{
    background-image:url("images/General_Images/Links_Button/Links_button_c.png");
}

.join-voidlings-button{
    position:absolute;
    right:40px;

    width:325.5px;
    height:87px;
    padding:0;
    border:0;
    background:none;
    cursor:url("HamishCursor_p.cur"), pointer;
    transition:transform 150ms ease, filter 150ms ease;
}

.join-voidlings-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.join-voidlings-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.join-voidlings-button:active{
    transform:translateY(0);
}

.join-voidlings-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

/* -------------------- */
/* Main */
/* -------------------- */

main{
    padding-top:115px;
}

.home-layout{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:min(95%, 1920px);
    margin:0 auto;
}

.intro{
    position:relative;
    left:0;
    width:657px;
    max-width:90%;
    margin-top:70px;
    flex:none;
    min-width:0;
    align-self:center;
}

.page{
    display:none;
}

.page.is-active{
    display:block;
    position:relative;
    left:40px;
}

.home-page.is-active{
    left:0;
}

.intro img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin-inline:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.intro-stars{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.about-section{
    width:min(90%, 1500px);
    margin:0 auto;
}

.about-section img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.links-page.is-active{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:40px 20px;
}

.links-page a{
    display:block;
    width:min(434px, 85vw);
    transition:transform 150ms ease, filter 150ms ease;
}

.links-page img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.links-page a:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.links-page a:active{
    transform:translateY(0);
}

.hero-row{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    width:min(100%, 1200px);
    flex:0 0 auto;
    padding:0;
    margin:20px auto 0;
    transform:none;
}

.left-media{
    display:flex;
    flex-direction:column;
    align-items:start;
    gap:8px;
    transform:translateX(0);
}

.tiktok-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:265px;
    transform:none;
}

.media-title{
    display:block;
    position:relative;
    z-index:3;
    width:300px;
    height:80px;
    object-fit:contain;
    transform:translateY(32px);
    user-select:none;
    -webkit-user-drag:none;
}

.meet-hamish-button{
    display:block;
    position:relative;
    top:0;
    width:min(512px, 85vw);
    padding:0;
    border:0;
    background:none;
    align-self:center;
    margin:20px auto 0;
}

.meet-hamish-button img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.meet-hamish-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.about-section .meet-hamish-button{
    transform:translate(625px, -100px);
}

.about-artwork{
    position:relative;
    width:100%;
    aspect-ratio:1920 / 900;
}

.about-section .about-artwork > img{
    position:absolute;
    top:0;
    height:auto;
}

.about-section .about-artwork__text{
    left:25.78125%;
    width:48.4375%;
}

.about-section .about-artwork__photo{
    left:0;
    width:31.25%;
    transform:translate(-50px, -10px);
}

.cult-of-hamish-button{
    display:none;
    position:relative;
    top:0;
    width:200px;
    height:60px;
    align-self:center;
    margin:0 auto;
}

.about-section .cult-of-hamish-button{
    transform:translate(625px, -100px);
}

.cult-of-hamish-button.is-visible{
    display:block;
}

.cult-of-hamish-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.cult-of-hamish-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

body.cult-mode{
    min-height:100vh;
    background-color:#111111;
    background-image:url("images/MeetHamish/Cult_Of_Hamish/backgroundpattern_hamish.png?v=20260727-222500");
    background-repeat:repeat;
}

body.cult-mode header{
    display:none;
}

body.cult-mode main{
    padding-top:0;
}

.cult-of-hamish-page.is-active{
    left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:24px 20px 60px;
}

.cults-escape-button{
    display:block;
    width:min(796px, 90vw);
    height:auto;
    aspect-ratio:199 / 58;
}

.cults-escape-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.hamish-in-cult{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    margin-top:100px;
    user-select:none;
    -webkit-user-drag:none;
}

.the-cultists{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    margin-top:30px;
    transform:translateY(-50px);
    user-select:none;
    -webkit-user-drag:none;
}

.watch-live{
    display:flex;
}

.intro .watch-live{
    position:static;
    justify-content:center;
    margin-top:20px;
    transform:none;
    z-index:2;
}

.intro .watch-live-link{
    width:min(325.5px, 34vw);
    height:auto;
    aspect-ratio:434 / 116;
}

.watch-live-link{
    display:block;
    width:199px;
    height:58px;
    transition:transform 150ms ease, filter 150ms ease;
}

.watch-live-link img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.watch-live-link:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.watch-live-link:active{
    transform:translateY(0);
}

.watch-live-link:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.youtube-frame{
    position:relative;
    width:646px;
    height:401px;
    flex-shrink:0;
    background:url("images/Home/YouTube_Frame/youtube_frame_v2.png?v=20260730-3") center / auto auto no-repeat;
}

.youtube-card{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:560px;
    height:315px;
}

.tiktok-frame{
    position:relative;
    width:265px;
    height:440px;
    flex-shrink:0;
    overflow:hidden;
    background:#180021;
    margin-top:0;
}

.tiktok-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border:30px solid transparent;
    border-image-source:url("images/Home/TikTok_Frame/tiktok_frame_v2.png?v=20260730-2");
    border-image-slice:30;
    border-image-width:30px;
    border-image-repeat:stretch;
    pointer-events:none;
}

.tiktok-card{
    position:absolute;
    top:20px;
    left:20px;
    width:225px;
    height:400px;
    z-index:1;
}

.media-card{
    display:block;
    overflow:hidden;
    border-radius:5px;
    background:#08000d;
    box-shadow:0 8px 24px rgba(0,0,0,.3);
    transition:transform 180ms ease, filter 180ms ease, box-shadow 180ms ease;
}

.media-card img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    user-select:none;
    -webkit-user-drag:none;
}

.youtube-card:hover{
    transform:translate(-50%, -50%) translateY(-6px) scale(1.035);
}

.tiktok-card:hover{
    transform:translateY(-6px) scale(1.035);
}

.media-card:hover{
    filter:brightness(1.08);
    box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 20px rgba(193,82,255,.35);
}

.media-card:active{
    filter:brightness(.95);
}

.media-card:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.media-play{
    position:absolute;
    top:50%;
    left:50%;
    width:68px;
    height:48px;
    transform:translate(-50%, -50%);
    border-radius:15px;
    background:rgba(18,10,22,.82);
    box-shadow:0 3px 14px rgba(0,0,0,.4);
    pointer-events:none;
    transition:transform 180ms ease, background 180ms ease;
}

.media-play::after{
    content:"";
    position:absolute;
    top:50%;
    left:52%;
    transform:translate(-50%, -50%);
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    border-left:17px solid white;
}

.media-card:hover .media-play{
    transform:translate(-50%, -50%) scale(1.08);
    background:#e72c4d;
}

@media (max-width:1500px){
    .home-layout{
        align-items:center;
    }

    .intro{
        width:657px;
        max-width:90%;
    }

    .hero-row{
        width:1200px;
        max-width:100%;
        flex-basis:auto;
        margin-top:20px;
    }
}

/* Compressed two-row header */
@media (max-width:1500px){
    html{
        scroll-padding-top:215px;
    }

    header{
        height:215px;
        align-items:flex-start;
    }

    .header-logo{
        width:325.5px;
        height:87px;
        margin:14px 0 0 20px;
    }

    .join-voidlings-button{
        top:14px;
        right:20px;
        width:244px;
        height:65.25px;
    }

    .header-nav{
        top:116px;
        left:50%;
        width:min(94%, 875px);
        gap:clamp(6px, 2vw, 25px);
        justify-content:center;
        transform:translateX(-50%);
    }

    .header-button{
        width:auto;
        max-width:200px;
        height:auto;
        aspect-ratio:3 / 1;
        flex:1 1 0;
    }

    main{
        padding-top:215px;
    }
}

@media (max-width:650px){
    .header-logo{
        width:244px;
        height:65.25px;
        margin-left:10px;
    }

    .join-voidlings-button{
        right:10px;
        width:183px;
        height:48.94px;
    }
}

/* Let the TikTok preview pop beyond its decorative frame like YouTube. */
.tiktok-frame{
    overflow:visible;
}

.tiktok-card:hover{
    z-index:3;
}

/* Layered home intro scene */
.intro{
    width:1024px;
    max-width:95%;
}

.intro .intro-tavern{
    position:relative;
    z-index:0;
    display:block;
    width:1024px;
    max-width:100%;
    height:auto;
    margin-inline:auto;
    transform:translateX(100px);
}

.intro .intro-stars-v2,
.intro .intro-base{
    position:absolute;
    top:-11px;
    left:60px;
    width:657px;
    max-width:64.16%;
    height:auto;
    margin:0;
}

.intro .intro-stars-v2{
    z-index:1;
}

.intro .intro-base{
    z-index:2;
}

.intro .watch-live{
    margin-top:31px;
}

.intro .intro-stars-v2{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    max-width:100%;
    pointer-events:none;
}

.intro .intro-base{
    position:relative;
    z-index:1;
}

/* Navigation button v2 artwork */
html .home-button{
    background-image:url("images/General_Images/Home_Button/home_button_v2_d.png");
}

html .home-button:hover{
    background-image:url("images/General_Images/Home_Button/home_button_v2_h.png?v=20260727-233214");
}

html .home-button:active,
html .home-button.is-current{
    background-image:url("images/General_Images/Home_Button/home_button_v2_c.png?v=20260727-233228");
}

html .schedule-button{
    background-image:url("images/General_Images/Schedule_Button/schedule_button_v2_d.png");
}

html .schedule-button:hover{
    background-image:url("images/General_Images/Schedule_Button/schedule_button_v2_h.png?v=20260727-233136");
}

html .schedule-button:active,
html .schedule-button.is-current{
    background-image:url("images/General_Images/Schedule_Button/schedule_button_v2_c.png?v=20260727-233145");
}

html .about-button{
    background-image:url("images/General_Images/About_Button/about_button_v2_d.png");
}

html .about-button:hover{
    background-image:url("images/General_Images/About_Button/about_button_v2_h.png?v=20260727-233057");
}

html .about-button:active,
html .about-button.is-current{
    background-image:url("images/General_Images/About_Button/about_button_v2_c.png?v=20260727-233106");
}

html .links-button{
    background-image:url("images/General_Images/Links_Button/links_button_v2_d.png");
}

html .links-button:hover{
    background-image:url("images/General_Images/Links_Button/links_button_v2_h.png?v=20260727-233009");
}

html .links-button:active,
html .links-button.is-current{
    background-image:url("images/General_Images/Links_Button/links_button_v2_c.png?v=20260727-233019");
}
/* -------------------- */
/* Global */
/* -------------------- */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:135px;
}

html,
body{
    margin:0;
    padding:0;

    background-color:#111111;
    background-image:url("images/General_Images/BackgroundPattern/backgroundpattern.png?v=20260727-135901");
    background-repeat:repeat;
    color:white;

    font-family:Arial, Helvetica, sans-serif;
    text-align:center;

    cursor:url("HamishCursor_d.cur"), auto;
}

a,
button,
[role="button"]{
    cursor:url("HamishCursor_p.cur"), pointer;
}

/* -------------------- */
/* Header */
/* -------------------- */

header{
    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:135px;

    background-color:#1B1B1B;
    background-image:url("images/General_Images/Header/header_pattern.png");
    background-repeat:repeat;

    display:flex;
    align-items:center;

    z-index:1000;
}

header::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:12px;

    background-image:url("images/General_Images/Header/header_pattern_bottom_v3.png?v=20260730");
    background-repeat:repeat-x;
    background-position:left bottom;
    pointer-events:none;
}

.header-logo{
    width:434px;
    height:116px;
    margin-left:40px;
    margin-right:40px;

    user-select:none;
    -webkit-user-drag:none;
}

.header-nav{
    position:absolute;
    left:50%;
    transform:translate(-50%, 15px);

    display:flex;
    align-items:center;
    gap:25px;
}

.header-button{
    display:block;
    width:200px;
    height:66.6667px;
    flex-shrink:0;
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    user-select:none;
    -webkit-user-drag:none;
}

.home-button{
    background-image:url("images/General_Images/Home_Button/home_button_d.png");
}

.home-button:hover{
    background-image:url("images/General_Images/Home_Button/home_button_h.png");
}

.home-button:active{
    background-image:url("images/General_Images/Home_Button/home_button_c.png");
}

.schedule-button{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_d.png");
}

.schedule-button:hover{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_h.png");
}

.schedule-button:active{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_c.png");
}

.about-button{
    background-image:url("images/General_Images/About_Button/About_button_d.png");
}

.about-button:hover{
    background-image:url("images/General_Images/About_Button/About_button_h.png");
}

.about-button:active{
    background-image:url("images/General_Images/About_Button/About_button_c.png");
}

.links-button{
    background-image:url("images/General_Images/Links_Button/Links_button_d.png");
}

.links-button:hover{
    background-image:url("images/General_Images/Links_Button/Links_button_h.png");
}

.links-button:active{
    background-image:url("images/General_Images/Links_Button/Links_button_c.png");
}

.header-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.home-button.is-current{
    background-image:url("images/General_Images/Home_Button/home_button_c.png");
}

.schedule-button.is-current{
    background-image:url("images/General_Images/Schedule_Button/Schedule_button_c.png");
}

.about-button.is-current{
    background-image:url("images/General_Images/About_Button/About_button_c.png");
}

.links-button.is-current{
    background-image:url("images/General_Images/Links_Button/Links_button_c.png");
}

.join-voidlings-button{
    position:absolute;
    right:40px;

    width:325.5px;
    height:87px;
    padding:0;
    border:0;
    background:none;
    cursor:url("HamishCursor_p.cur"), pointer;
    transition:transform 150ms ease, filter 150ms ease;
}

.join-voidlings-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.join-voidlings-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.join-voidlings-button:active{
    transform:translateY(0);
}

.join-voidlings-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

/* -------------------- */
/* Main */
/* -------------------- */

main{
    padding-top:115px;
}

.home-layout{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:20px;
    width:min(95%, 1920px);
    margin:0 auto;
}

.intro{
    position:relative;
    left:0;
    width:657px;
    max-width:90%;
    margin-top:70px;
    flex:none;
    min-width:0;
    align-self:center;
}

.page{
    display:none;
}

.page.is-active{
    display:block;
    position:relative;
    left:40px;
}

.home-page.is-active{
    left:0;
}

.intro img{
    display:block;
    width:auto;
    max-width:100%;
    height:auto;
    margin-inline:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.intro-stars{
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
}

.about-section{
    width:min(90%, 1500px);
    margin:0 auto;
}

.about-section img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.links-page.is-active{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:16px;
    padding:40px 20px;
}

.links-page a{
    display:block;
    width:min(434px, 85vw);
    transition:transform 150ms ease, filter 150ms ease;
}

.links-page img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.links-page a:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.links-page a:active{
    transform:translateY(0);
}

.hero-row{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    gap:20px;
    width:min(100%, 1200px);
    flex:0 0 auto;
    padding:0;
    margin:20px auto 0;
    transform:none;
}

.left-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    transform:translateX(0);
}

.tiktok-media{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    width:265px;
    transform:none;
}

.media-title{
    display:block;
    position:relative;
    z-index:3;
    width:300px;
    height:80px;
    object-fit:contain;
    transform:translateY(32px);
    user-select:none;
    -webkit-user-drag:none;
}

.meet-hamish-button{
    display:block;
    position:relative;
    top:0;
    width:min(512px, 85vw);
    padding:0;
    border:0;
    background:none;
    align-self:center;
}

.meet-hamish-button img{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.meet-hamish-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.cult-of-hamish-button{
    display:none;
    position:relative;
    top:0;
    width:200px;
    height:60px;
    align-self:center;
}

.cult-of-hamish-button.is-visible{
    display:block;
}

.cult-of-hamish-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.cult-of-hamish-button:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

body.cult-mode{
    min-height:100vh;
    background-color:#111111;
    background-image:url("images/MeetHamish/Cult_Of_Hamish/backgroundpattern_hamish.png?v=20260727-222500");
    background-repeat:repeat;
}

body.cult-mode header{
    display:none;
}

body.cult-mode main{
    padding-top:0;
}

.cult-of-hamish-page.is-active{
    left:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:24px 20px 60px;
}

.cults-escape-button{
    display:block;
    width:min(796px, 90vw);
    height:auto;
    aspect-ratio:199 / 58;
}

.cults-escape-button img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.hamish-in-cult{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    margin-top:100px;
    user-select:none;
    -webkit-user-drag:none;
}

.the-cultists{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    margin-top:30px;
    transform:translateY(-50px);
    user-select:none;
    -webkit-user-drag:none;
}

.watch-live{
    display:flex;
}

.intro .watch-live{
    position:static;
    justify-content:center;
    margin-top:20px;
    transform:none;
    z-index:2;
}

.intro .watch-live-link{
    width:min(325.5px, 34vw);
    height:auto;
    aspect-ratio:434 / 116;
}

.watch-live-link{
    display:block;
    width:199px;
    height:58px;
    transition:transform 150ms ease, filter 150ms ease;
}

.watch-live-link img{
    display:block;
    width:100%;
    height:100%;
    user-select:none;
    -webkit-user-drag:none;
}

.watch-live-link:hover{
    transform:translateY(-2px);
    filter:brightness(1.1);
}

.watch-live-link:active{
    transform:translateY(0);
}

.watch-live-link:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.youtube-frame{
    position:relative;
    width:646px;
    height:401px;
    flex-shrink:0;
    background:url("images/Home/YouTube_Frame/youtube_frame_v2.png?v=20260730-3") center / auto auto no-repeat;
}

.youtube-frame iframe{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);

    width:560px;
    height:315px;
    border:0;
}

.tiktok-frame{
    position:relative;
    width:265px;
    height:440px;
    flex-shrink:0;
    overflow:hidden;
    background:#180021;
    margin-top:0;
}

.tiktok-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    border:30px solid transparent;
    border-image-source:url("images/Home/TikTok_Frame/tiktok_frame_v2.png?v=20260730-2");
    border-image-slice:30;
    border-image-width:30px;
    border-image-repeat:stretch;
    pointer-events:none;
}

.tiktok-frame iframe{
    position:absolute;
    top:20px;
    left:20px;
    width:225px;
    height:400px;
    border:0;
    z-index:1;
}

@media (max-width:1500px){
    .home-layout{
        align-items:center;
    }

    .intro{
        width:657px;
        max-width:90%;
    }

    .hero-row{
        width:1200px;
        max-width:100%;
        flex-basis:auto;
        margin-top:20px;
    }
}

/* Final responsive header overrides (kept last for the duplicated legacy stylesheet) */
@media (max-width:1500px){
    html{ scroll-padding-top:215px; }

    header{
        height:215px;
        align-items:flex-start;
    }

    .header-logo{
        width:325.5px;
        height:87px;
        margin:14px 0 0 20px;
    }

    .join-voidlings-button{
        top:14px;
        right:20px;
        width:244px;
        height:65.25px;
    }

    .header-nav{
        top:116px;
        left:50%;
        width:min(94%, 875px);
        gap:clamp(6px, 2vw, 25px);
        justify-content:center;
        transform:translateX(-50%);
    }

    .header-button{
        width:auto;
        max-width:200px;
        height:auto;
        aspect-ratio:3 / 1;
        flex:1 1 0;
    }

    main{ padding-top:215px; }
}

@media (max-width:650px){
    .header-logo{
        width:244px;
        height:65.25px;
        margin-left:10px;
    }

    .join-voidlings-button{
        right:10px;
        width:183px;
        height:48.94px;
    }
}

.tiktok-frame{
    overflow:visible;
}

.tiktok-card:hover{
    z-index:3;
}

/* Final layered home intro overrides */
.intro{
    width:1024px;
    max-width:95%;
    margin-top:-10px;
}

.intro .intro-tavern{
    position:relative;
    left:50%;
    z-index:0;
    display:block;
    width:2145px;
    max-width:none;
    height:auto;
    margin-inline:auto;
    transform:translateX(-50%);
}

.intro .intro-base{
    position:absolute;
    top:39px;
    left:-65px;
    width:591.3px;
    max-width:57.744%;
    height:auto;
    margin:0;
}

.intro .intro-stars-v2{
    position:absolute;
    top:404px;
    left:50%;
    z-index:1;
    width:657px;
    max-width:64.16%;
    height:auto;
    margin:0;
    transform:translateX(-50%);
    display:none;
}

.intro .intro-base{ z-index:2; }
.intro .watch-live{
    position:relative;
    z-index:2;
    margin-top:131px;
    transform:translateY(-100px);
}

.hero-row{
    transform:translate(-90px, -125px);
}

.hero-row{
    position:relative;
    top:auto;
    left:auto;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    width:min(100%, 1200px);
    align-items:center;
    gap:0;
    margin:20px auto 0;
    /* Center the gap between the 646px video frame and 265px clip frame. */
    transform:translate(-95.25px, -215px);
}

.hero-row .left-media,
.hero-row .tiktok-media{
    justify-self:center;
}

.intro .watch-live{
    position:absolute;
    top:517px;
    left:50%;
    z-index:3;
    display:flex;
    margin:0;
    transform:translateX(-50%);
}

.intro .watch-live-link{
    width:325.5px;
    height:auto;
    aspect-ratio:434 / 116;
}

.intro .intro-base{
    left:50%;
    transform:translateX(-50%);
}

.page-tavern{
    position:relative;
    left:50%;
    display:block;
    width:2145px;
    max-width:none;
    height:auto;
    margin:0;
    transform:translateX(-50%);
    user-select:none;
    -webkit-user-drag:none;
    pointer-events:none;
}

.tavern-page.is-active,
.links-page.is-active{
    left:0;
}

#schedule > .page-tavern{
    position:absolute;
    top:0;
}

.schedule-artwork{
    position:relative;
    left:50%;
    display:block;
    width:auto;
    height:auto;
    max-width:none;
    margin:0;
    transform:translateX(-50%);
}

.links-page.is-active > .page-tavern{
    position:absolute;
    top:0;
    left:50%;
    z-index:0;
    width:2145px;
    max-width:none;
    transform:translateX(calc(-50% - 80px));
}

.links-page.is-active{
    position:relative;
    min-height:862px;
}

.links-page.is-active > a{
    position:relative;
    top:50px;
    z-index:1;
}

.business-enquiries{
    position:relative;
    z-index:1;
    width:min(760px, calc(100% - 48px));
    margin:130px auto 90px;
    padding-left:22px;
    color:#fff;
    font-family:Arial, Helvetica, sans-serif;
    text-align:left;
}

.business-enquiries__note{
    margin:0 0 14px;
    color:rgba(255, 255, 255, .68);
    font-size:18px;
    font-weight:300;
    letter-spacing:.02em;
    text-align:center;
}

.business-enquiries h2{
    margin:0 0 28px;
    font-size:clamp(54px, 7vw, 86px);
    font-weight:400;
    line-height:1;
    letter-spacing:-.03em;
    text-align:center;
}

.business-enquiries__form{
    display:grid;
    gap:22px;
}

.business-enquiries__field{
    position:relative;
}

.business-enquiries__field label{
    position:absolute;
    top:50%;
    left:20px;
    color:rgba(255, 255, 255, .82);
    font-size:17px;
    transform:translateY(-50%);
    transition:opacity .15s ease;
    pointer-events:none;
}

.business-enquiries__field--message label{
    top:17px;
    transform:none;
}

.business-enquiries__field:focus-within label,
.business-enquiries__field:has(input:not(:placeholder-shown)) label,
.business-enquiries__field:has(textarea:not(:placeholder-shown)) label{
    opacity:0;
}

.business-enquiries input,
.business-enquiries textarea{
    box-sizing:border-box;
    width:100%;
    padding:13px 20px;
    color:#fff;
    border:1px solid rgba(255, 255, 255, .9);
    border-radius:0;
    outline:none;
    background:rgba(0, 0, 0, .22);
    font:17px/1.35 Arial, Helvetica, sans-serif;
}

.business-enquiries input{
    min-height:48px;
}

.business-enquiries textarea{
    min-height:150px;
    resize:vertical;
}

.business-enquiries input:focus,
.business-enquiries textarea:focus{
    border-color:#df741c;
    box-shadow:0 0 0 1px #df741c;
}

.business-enquiries__actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
}

.business-enquiries__actions button{
    min-width:128px;
    padding:12px 28px;
    color:#b56cff;
    border:2px solid #9b4de3;
    background:rgba(0, 0, 0, .45);
    font:16px/1 Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    cursor:pointer;
}

.business-enquiries__actions button:hover,
.business-enquiries__actions button:focus-visible{
    color:#fff;
    background:#8b3fc7;
}

.business-enquiries__status{
    flex:1;
    margin:0;
    color:rgba(255, 255, 255, .78);
    font-size:14px;
    text-align:right;
}

.business-enquiries__trap{
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden;
}

@media (max-width:650px){
    .business-enquiries{
        width:calc(100% - 32px);
        margin-top:110px;
        margin-bottom:55px;
        padding-left:14px;
    }

    .business-enquiries__note{
        margin-left:0;
        font-size:14px;
    }

    .business-enquiries h2{
        margin-bottom:22px;
        font-size:48px;
    }

    .business-enquiries__form{
        gap:16px;
    }

    .business-enquiries__actions{
        align-items:stretch;
        flex-direction:column;
    }

    .business-enquiries__status{
        text-align:left;
    }

    .business-enquiries__actions button{
        width:100%;
    }
}

/* Fade only the decorative media frames, not their content or titles. */
.youtube-frame{
    background:none;
}

.youtube-frame::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:url("images/Home/YouTube_Frame/youtube_frame_v2.png?v=20260730-3") center / auto auto no-repeat;
    opacity:.3;
    pointer-events:none;
}

.youtube-card{
    z-index:1;
    border:0;
}

.tiktok-frame::after{
    opacity:.15;
}

/* Header button v2 artwork */
html .home-button{ background-image:url("images/General_Images/Header_Buttons/home_v2_d.png"); }
html .home-button:hover{ background-image:url("images/General_Images/Header_Buttons/home_v2_h.png"); }
html .home-button:active,
html .home-button.is-current{ background-image:url("images/General_Images/Header_Buttons/home_v2_c.png"); }

html .schedule-button{ background-image:url("images/General_Images/Header_Buttons/schedule_v2_d.png"); }
html .schedule-button:hover{ background-image:url("images/General_Images/Header_Buttons/schedule_v2_h.png"); }
html .schedule-button:active,
html .schedule-button.is-current{ background-image:url("images/General_Images/Header_Buttons/schedule_v2_c.png"); }

html .about-button{ background-image:url("images/General_Images/Header_Buttons/about_v2_d.png"); }
html .about-button:hover{ background-image:url("images/General_Images/Header_Buttons/about_v2_h.png"); }
html .about-button:active,
html .about-button.is-current{ background-image:url("images/General_Images/Header_Buttons/about_v2_c.png"); }

html .support-button{ background-image:url("images/General_Images/Support_Button/support_v2_d.png"); }
html .support-button:hover{ background-image:url("images/General_Images/Support_Button/support_v2_h.png"); }
html .support-button:active,
html .support-button.is-current{ background-image:url("images/General_Images/Support_Button/support_v2_c.png"); }

html .links-button{ background-image:url("images/General_Images/Header_Buttons/links_v2_d.png"); }
html .links-button:hover{ background-image:url("images/General_Images/Header_Buttons/links_v2_h.png"); }
html .links-button:active,
html .links-button.is-current{ background-image:url("images/General_Images/Header_Buttons/links_v2_c.png"); }

.meet-hamish-button,
.cult-of-hamish-button{
    z-index:1;
}

header::before{
    content:"";
    position:absolute;
    top:calc(100% - 407.5px);
    left:0;
    z-index:2;
    width:100%;
    height:369px;
    background-image:url("images/General_Images/Header/horizontalivy.png?v=20260728-233333");
    background-repeat:repeat-x;
    background-position:left top;
    background-size:921.6px 369px;
    pointer-events:none;
}

.ivy-copy{
    position:absolute;
    top:calc(100% - 407.5px);
    left:0;
    z-index:1;
    width:100%;
    height:405.9px;
    background-image:url("images/General_Images/Header/horizontalivy.png?v=20260728-233333");
    background-repeat:repeat-x;
    background-position:left top;
    background-size:1013.76px 405.9px;
    opacity:0.3;
    pointer-events:none;
}

.header-logo,
.header-nav,
.join-voidlings-button{
    z-index:3;
}

.header-logo{
    position:relative;
    object-fit:contain;
}

header::after{
    z-index:1;
}

/* Additional header height */
header{
    height:175px;
    background:none;
}

/* Raise the header backdrop and its pink edge without moving the navigation. */
header::after{
    bottom:30px;
    height:calc(100% - 30px);
    background-color:#1B1B1B;
    background-image:
        url("images/General_Images/Header/header_pattern_bottom_v3.png?v=20260730"),
        url("images/General_Images/Header/header_pattern.png");
    background-repeat:repeat-x, repeat;
    background-position:left bottom, left -30px;
}

main{
    padding-top:155px;
}

html{
    scroll-padding-top:175px;
    overflow-y:scroll;
    scrollbar-gutter:stable;
}

@media (max-width:1500px){
    header{ height:255px; }
    main{ padding-top:255px; }
    html{ scroll-padding-top:255px; }
}

@media (max-width:1500px){
    .intro{ margin-top:-30px; }
}

/* Home call-to-action buttons */
.intro .watch-live{
    align-items:center;
    gap:20px;
}

.intro .watch-live-link,
.intro .join-voidlings-button{
    width:min(325.5px, 40vw);
    height:auto;
    aspect-ratio:434 / 116;
}

.intro .join-voidlings-button{
    position:static;
    flex-shrink:0;
}

/* Support page */
.support-page{
    width:930px;
    margin:0 auto;
}

.support-panel{
    position:relative;
    width:930px;
    height:900px;
}

.support-panel__artwork{
    display:block;
    width:930px;
    height:900px;
    user-select:none;
    -webkit-user-drag:none;
}

.support-panel__donate{
    position:absolute;
    left:50%;
    bottom:20px;
    width:434px;
    height:116px;
    transform:translateX(-50%);
    transition:filter 150ms ease, transform 150ms ease;
}

.support-panel__donate img{
    display:block;
    width:434px;
    height:116px;
    user-select:none;
    -webkit-user-drag:none;
}

.support-panel__donate:hover{
    filter:brightness(1.1);
    transform:translate(-50%, -2px);
}

.support-panel__donate:focus-visible{
    outline:3px solid white;
    outline-offset:4px;
}

.home-about-photo{
    position:absolute;
    top:20px;
    left:-50px;
    z-index:2;
    display:block;
    width:auto;
    height:auto;
    user-select:none;
    -webkit-user-drag:none;
}

.cultists-artwork{
    position:relative;
    width:min(2540px, 100%);
    margin-top:30px;
    transform:translateY(-50px);
}

.cultists-artwork .the-cultists{
    width:auto;
    height:auto;
    max-width:100%;
    margin-top:0;
    transform:none;
}

.legend-of-hamish{
    position:absolute;
    top:50%;
    left:50%;
    z-index:1;
    display:block;
    width:930px;
    height:1332px;
    max-width:none;
    transform:translate(-50%, -50%);
    user-select:none;
    -webkit-user-drag:none;
}

body.cult-mode::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    background:rgba(0, 0, 0, .4);
    pointer-events:none;
}

body.cult-mode main{
    position:relative;
    z-index:1;
}

body.cult-mode .the-cultists{
    filter:brightness(.6);
}

body.cult-mode .cults-escape-button{
    width:750px;
    height:100.5px;
    aspect-ratio:auto;
    opacity:.2;
}

/* Stars repeat above the regular background pattern and behind all page content. */
body:not(.cult-mode){
    background-image:
        url("images/General_Images/BackgroundPattern/stars_pattern.png"),
        url("images/General_Images/BackgroundPattern/backgroundpattern.png?v=20260727-135901");
    background-repeat:repeat, repeat;
}

/* Readable alternatives to image-based text; desktop artwork stays unchanged. */
.mobile-copy{ display:none; }

@media (max-width:900px){
    html{
        scroll-padding-top:120px;
        scrollbar-gutter:auto;
        overflow-x:clip;
        -webkit-text-size-adjust:100%;
    }
    body{ overflow-x:clip; }
    header{
        height:112px;
        flex-direction:column;
        align-items:center;
        justify-content:flex-start;
        padding:5px 10px 8px;
    }
    header::after{ bottom:0; height:100%; }
    header::before, .ivy-copy{
        top:0;
        height:100%;
        background-size:auto 150px;
        background-position:center bottom;
    }
    .header-logo{
        width:190px;
        max-width:65%;
        height:51px;
        margin:0;
        flex-shrink:0;
    }
    .header-nav{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        display:grid;
        grid-template-columns:repeat(5, minmax(0, 1fr));
        gap:3px;
        width:min(100%, 580px);
    }
    .header-button{
        width:100%;
        min-width:0;
        max-width:none;
        height:44px;
        aspect-ratio:auto;
    }
    main{ padding-top:128px; }
    .page.is-active{ left:0; max-width:100%; }
    .home-layout{ width:calc(100% - 24px); gap:24px; }
    .intro{ width:100%; max-width:620px; margin:0; }
    .intro .intro-tavern{
        position:absolute;
        inset:0;
        width:100%;
        max-width:100%;
        height:auto;
        transform:none;
        opacity:.55;
    }
    .intro .intro-base{
        position:relative;
        top:auto;
        left:auto;
        width:100%;
        max-width:100%;
        margin:0 auto -18%;
        clip-path:inset(0 0 23% 0);
        transform:none;
    }
    .intro .watch-live{
        position:relative;
        top:auto;
        left:auto;
        transform:none;
        margin:12px 0 0;
        gap:8px;
        flex-wrap:wrap;
    }
    .intro .watch-live-link, .intro .join-voidlings-button{
        width:min(244px, 100%);
        max-width:100%;
        height:auto;
        min-height:44px;
    }
    .hero-row{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:100%;
        gap:24px;
        margin:0;
        transform:none;
    }
    .left-media{ width:100%; max-width:646px; min-width:0; }
    .tiktok-media{ width:min(265px, 100%); }
    .media-title{
        width:min(260px, 100%);
        height:auto;
        aspect-ratio:300 / 80;
        transform:none;
    }
    .youtube-frame{ width:100%; height:auto; aspect-ratio:646 / 401; }
    .youtube-frame::before{ background-size:100% 100%; }
    .youtube-card{ width:86.687%; height:78.554%; }
    .tiktok-frame{ width:100%; height:auto; aspect-ratio:265 / 440; }
    .tiktok-card{ left:7.547%; top:4.545%; width:84.906%; height:90.909%; }
    .youtube-card:hover{ transform:translate(-50%, -50%); }
    .tiktok-card:hover{ transform:none; }
    .business-enquiries{
        width:100%;
        max-width:620px;
        margin:24px auto 48px;
        padding:0 4px;
    }
    .business-enquiries h2{ font-size:clamp(34px, 8vw, 48px); line-height:1.15; }
    .business-enquiries__note{ font-size:16px; line-height:1.5; }
    .business-enquiries__field label,
    .business-enquiries__field--message label{
        position:static;
        display:block;
        transform:none;
        opacity:1;
        margin-bottom:8px;
        font-size:16px;
    }
    .business-enquiries__field:focus-within label,
    .business-enquiries__field:has(input:not(:placeholder-shown)) label,
    .business-enquiries__field:has(textarea:not(:placeholder-shown)) label{ opacity:1; }
    .business-enquiries__actions{ flex-direction:column; align-items:stretch; }
    .business-enquiries__actions button{ min-height:48px; }
    .business-enquiries__status{ text-align:left; overflow-wrap:anywhere; }
    .mobile-copy{
        display:block;
        position:relative;
        z-index:1;
        width:100%;
        max-width:660px;
        margin:0 auto;
        padding:24px 20px;
        border:1px solid #684474;
        border-radius:16px;
        background:rgba(20, 13, 25, .94);
        color:#f2e3f1;
        font:18px/1.7 Georgia, 'Times New Roman', serif;
        text-align:left;
        overflow-wrap:anywhere;
    }
    .mobile-copy h1, .mobile-copy h2{
        color:#e2b2e5;
        line-height:1.2;
        text-align:center;
        margin:0 0 24px;
        font-weight:400;
    }
    .mobile-copy h1{ font-size:clamp(30px, 7vw, 44px); }
    .mobile-copy h2{ font-size:28px; }
    .mobile-copy p{ margin:0 0 1.2em; }
    .mobile-copy p:last-child{ margin-bottom:0; }
    .mobile-copy.mobile-welcome{
        padding:12px 8px;
        border:0;
        background:none;
        text-align:center;
    }
    #schedule, .about-section, .support-page{
        width:calc(100% - 24px);
        margin:0 auto;
        padding-bottom:40px;
    }
    #schedule > .page-tavern, .schedule-artwork,
    .about-section .about-artwork__text, .support-panel__artwork,
    .legend-of-hamish{ display:none; }
    .mobile-schedule dl{ margin:0; }
    .mobile-schedule dl > div{ padding:14px 0; border-top:1px solid #684474; }
    .mobile-schedule dt{ color:#e2b2e5; font-weight:bold; }
    .mobile-schedule dd{ margin:4px 0 0; }
    .about-artwork{ width:100%; aspect-ratio:auto; margin:20px auto 0; }
    .about-section .about-artwork > .about-artwork__photo{
        position:relative;
        top:auto;
        left:auto;
        width:min(300px, 100%);
        height:auto;
        margin:auto;
        transform:none;
    }
    .about-section .meet-hamish-button,
    .about-section .cult-of-hamish-button{ transform:none; max-width:100%; margin:16px auto; }
    .support-panel{ width:100%; height:auto; }
    .support-panel__donate{
        position:relative;
        left:auto;
        bottom:auto;
        display:block;
        width:min(320px, 100%);
        height:auto;
        margin:20px auto;
        transform:none;
    }
    .support-panel__donate img{ width:100%; height:auto; }
    .support-panel__donate:hover{ transform:none; }
    .links-page.is-active{ min-height:0; padding:16px 16px 48px; overflow:hidden; }
    .links-page.is-active > .page-tavern{
        left:0;
        width:100%;
        max-width:100%;
        transform:none;
        opacity:.5;
    }
    .links-page.is-active > a{ top:0; width:min(360px, 100%); }
    .cult-of-hamish-page.is-active{ padding:20px 12px 40px; }
    body.cult-mode .cults-escape-button{
        width:min(500px, 100%);
        height:auto;
        aspect-ratio:750 / 100.5;
        min-height:44px;
        opacity:1;
    }
    .hamish-in-cult{ width:min(400px, 100%); margin-top:24px; }
    .cultists-artwork{ width:100%; margin-top:20px; transform:none; }
    .cultists-artwork .the-cultists{ width:100%; margin-top:24px; }
}