/******************************************/
/* fontage                                */
/******************************************/
@font-face {
    font-family: '__ITC Souvenir Std_5';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/souvenirstd-bold.eot');
    src: url('/assets/fonts/souvenirstd-bold.woff') format('woff');
}

@font-face {
    font-family: '__ITC Souvenir Std_5';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/souvenirstd-demi.eot');
    src: url('/assets/fonts/souvenirstd-demi.woff') format('woff');
}

@font-face {
    font-family: '__ITC Souvenir Std_5';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/souvenirstd-medium.eot');
    src: url('/assets/fonts/souvenirstd-medium.woff') format('woff');
}


/******************************************/
/* setup                                  */
/******************************************/
:root {
    --border-r:   0.5rem;
    --main-blk:   #404037;
    --main-mgn:   183px;
    --offset-x:   1rem;
    --offset-y:   5px;
    --spacing:    0.75rem;
    --the-can-h:  330px;
    --the-can-w:  520px;
    --the-line-h: 6px;
    --top-bg-h:   153px;
}

html {
    color: var(--main-blk);
    font-family: Trebuchet MS, sans-serif; 
    font-size: 16px;
    font-weight: 400;
    height: 100%;
    line-height: 1.3;
    min-width: 320px;
    text-size-adjust: 100%;
    width: 100%;
}
body { 
    background: #c5ba4f url('/assets/img/2007-bgstripes.gif'); 
    background-size: 30px;
    border-top: var(--top-bg-h) solid #fff38533;
    box-shadow: 1rem 1rem 10rem 1px rgba(0,0,0,0.25) inset;
    margin: 0; 
    padding: 0; 
}


/*text*/
h1, h2, h3, p { 
    margin: 0; 
    padding: 0; 
}
h2, h3, .news p strong {
    font-family:'__ITC Souvenir Std_5', serif;
    font-weight: 600;
}
h2 { 
    font-size: 1.25rem; 
    text-transform: uppercase;
}
h3 { 
    border-left: 1px solid var(--main-blk); 
    font-size: 1.125rem; 
    padding: 1rem 0 0.5rem 0.75rem; 
}
h3 a {
    color: var(--main-blk);
    text-decoration: none;
}
h3 > a:hover {
    margin-left: -1.5rem
}
h3 > a:hover::before {
    content: '# ';
    display: inline-block;
    font-size: 1rem;
    text-align: right;
    width: 1.5rem;
}
h3 span { 
    display: block; 
}
h3 span.subtitle {
    font-size: 1rem;
    margin: 0 0 0.25rem;
}
h3 span.meta { 
    color: #555; 
    font-family: Trebuchet MS, sans-serif; 
    font-size: 0.875rem;
    font-weight: normal; 
    white-space: nowrap;
}
p { 
    font-size: 1rem;
    line-height: 1.4;
    margin-top: 0.875rem; 
}
.foot p { 
    margin: 0; 
}
a { 
    color: #300; 
    outline: none; 
    text-decoration: underline; 
}
a:active, a:hover { 
    text-decoration: none; 
}


/*prettify*/
::-moz-selection { 
    background: #D5CA4F; 
}
::selection { 
    background: #D5CA4F; 
}
:target { 
    background: #ffffeb !important;
    background: linear-gradient(to bottom,  #ffffeb 0%,#ededbd 80%) !important; 
}



/******************************************/
/* structure                              */
/******************************************/
h1 { 
    left: 0;
    position: absolute; 
    margin: 0; 
    padding: 0; 
    text-indent: -500rem;
    top: 0;
}


/* it was my understanding that there Would be no math... */
#the-line { 
    background: #222; 
    box-shadow: 0px 1px 8px rgba(0,0,0,.45);
    height: var(--the-line-h); 
    left: 0; 
    position: absolute; 
    top: calc(var(--top-bg-h) - 4px); 
    width: 100%; 
    z-index: 10; 
}
#outer { 
    margin: calc(-1 * var(--top-bg-h)) auto 0; 
    max-width: 1400px; 
    padding-top: var(--top-bg-h); 
    position: relative;
}
#the-can {
    background: url('/assets/img/2025-the-can.png') no-repeat;
    background-size: var(--the-can-w);
    background-position: var(--offset-x) var(--offset-y);
    height: calc(var(--the-can-h) + var(--offset-y));
    left: 0;
    position: absolute;
    top: 0;
    width: calc(var(--the-can-w) + var(--offset-x));
    z-index: 0;
}
#main { 
    padding: calc(var(--spacing) + 3px) var(--main-mgn) 1.25rem;
    position: relative;
    z-index: 1;
}
#main > div { 
    border-radius: var(--border-r); 
    box-shadow: 0px 1px 8px rgba(0,0,0,.45);
    margin: 0 0 var(--spacing) 0; 
    padding: 1rem;
}


.scrolled #the-can {
    background-position-y: calc(-1 *var(--top-bg-h));
    position: sticky;
    height: calc(var(--the-can-h) - var(--top-bg-h));
}
.scrolled #main {
    margin-top: calc(-1 * (var(--top-bg-h) + var(--spacing)));
}



/******************************************/
/* containers                             */
/******************************************/
#main > div.exp { 
    background: #fff385;
    background: linear-gradient(to bottom, #fff385 0%, #e5da77 100%);
}
#main > div.item { 
    background: #ffffff; 
    background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 80%);
    padding-top: 0; 
}
#main > div.foot { 
    background: #e6e6e6; 
    background: linear-gradient(to bottom, #e6e6e6 0%, #cccccc 80%);
    font-size: 0.75rem; 
    padding: 0.375rem 1rem; 
    text-align: right; 
}



/******************************************/
/* content                                */
/******************************************/
div#cats {
    box-shadow: none;
    display: flex;
    gap: 0.875rem;
    justify-content: end;
    padding: 0;
}
a.cat {
    box-shadow: 0px 1px 8px rgba(0,0,0,.45);
    border-radius: var(--border-r); 
    background: #fff385;
    background: linear-gradient(to bottom, #fff385 0%, #e5da77 100%);
    padding: 0.375rem 1rem;
    text-decoration: none;
    white-space: nowrap;
}
a.cat:hover,
a.cat.active {
    background: #ffffff; 
    background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 80%);
}
.item { 
    display: none; 
}
.item.show {
    display: block;
}
.item > div {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
a.sighting { 
    border: 1px solid var(--main-blk); 
    height: 9.375rem; 
    position: relative; 
    text-decoration: none; 
    width: 9.375rem; 
}
.sighting span { 
    background: rgba(34,34,34,.75);
    bottom: -1px; 
    color: #fff; 
    display: block; 
    font: 0.75rem/0.75rem Arial; 
    padding: 3px 3px 2px; 
    position: absolute; 
    right: 0; 
}
a.sighting img { 
    border: 0; 
    height: auto;
    margin: 0 3px 3px 0; 
    width: 100%;
}
a.sighting:hover img { 
    opacity: 0.4; 
}


/*simple lightbox*/
.slbOverlay, .slbArrow { 
    opacity: 0.9 !important; 
}
.slbCloseBtn, .slbCaption { 
    color: rgba(255, 255, 255, 0.8) !important; 
}
.slbCaption {
    bottom: 2rem !important;
    font-family: '__ITC Souvenir Std_5', serif;
    font-size: 1.125rem !important;
    text-align: left !important;
}



/******************************************/
/* error pages                            */
/******************************************/
body#error { 
    border: none;
    height: 100vh;
    text-align: center; 
}
#error div#wrap { 
    margin: 0 auto; 
    padding: 4rem 0;
}
#error #wrap img {
    height: auto;
    max-width: calc(100% - 4rem);
    margin-bottom: 1rem;
}
#error p { 
    font-family:'__ITC Souvenir Std_5', serif;
    font-size: 1.25rem; 
    font-weight: 600;
    padding: 0 4rem;
}
#error p.small { 
    border-top: 2px solid #222;
    font-size: 1rem; 
    margin-top: 2.5rem;
    padding-top: 0.5rem;
}
p.small span { 
    text-transform: uppercase; 
}



/******************************************/
/* responsivo                             */
/******************************************/
@media (max-width: 1200px) {
    :root {
        --main-mgn: 123px;
    }
    html { 
        font-size: 15px; 
    }
    #outer { 
        max-width: 100%; 
    }
    #main { 
        padding-bottom: 2rem;
    }
}


@media (max-width: 1023px) {
    :root {
        --main-mgn:  93px;
        --top-bg-h: 116px;
        --the-can-h: 248px;
        --the-can-w: 390px;
    }
}


@media (max-width: 767px) {
    :root {
        --main-mgn:  62px;
        --top-bg-h: 80px;
        --the-can-h: 165px;
        --the-can-w: 260px;
        --the-line-h: 4px;
    }
    html { 
        font-size: 14px; 
    }

    #the-line { 
        top: var(--top-bg-h); 
    }
    #main { 
        margin-top: 0; 
        padding-right:  1.25rem;
        padding-top: var(--spacing);
    }

    #error div#wrap { 
        padding: 2rem 0;
    }
    #error p { 
        padding: 0 2rem;
    }
}


@media (max-width: 450px) {
    :root {
        --main-mgn: 1.25rem;
    }
}