/* Reset */
html, header, body, footer, div, nav, h1, h2, h3, p, a, q, b, u, ul, li, img, table, tbody, tfoot, thead, tr, th, td, article {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, footer, header, nav { display: block; }
body { line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }

/* Basic */
@-ms-viewport { width: device-width; }
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
body { background: #1b1f22; }
body.is-preload *, body.is-preload *:before, body.is-preload *:after { animation: none !important; transition: none !important; }

/* Type */
html { font-size: 12pt; }
@media screen and (max-width: 900px) { html { font-size: 11pt; } }
@media screen and (max-width: 400px) { html { font-size: 10pt; } }
body, input, select, textarea { color: #ffffff; font-family: Garamond, serif; font-weight: 300; font-size: 1rem; line-height: 1.65; }
a { transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out; border-bottom: dotted 1px rgba(255, 255, 255, 0.5); text-decoration: none; color: inherit; }
a:hover { border-bottom-color: transparent; }
b { color: #ffffff; font-weight: 600; }
p { margin: 0 0 1rem 0; }
h1, h2, h3 { color: #ffffff; font-weight: 600; margin: 0 0 1rem 0; }
h1 a, h2 a, h3 a { color: inherit; text-decoration: none; }
h1.major, h2.major, h3.major { border-bottom: solid 1px #ffffff; width: max-content; }
h1 { font-size: 2rem; line-height: 1.3; letter-spacing: 0.5rem; text-transform: uppercase; }
h2 { font-size: 1.5rem; letter-spacing: 0.2rem; text-transform: uppercase; }
h3 { font-size: 1rem; letter-spacing: 0.2rem; }
@media screen and (max-width: 900px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.25em; }
}

#banner {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(27, 31, 34);
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
    font-family: Garamond, serif;
    z-index: 1000;
    padding: 0.5rem 1rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    opacity: 0; /* Skjult som standard */
    transition: opacity 1s ease; /* Smooth fade-in transition */
}

#banner.visible {
    opacity: 1; /* Fade-in */
}

#banner.hidden {
    opacity: 0; /* Fade-out */
}

#banner p {
    margin: 0;
    padding: 0;
}

#banner-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1rem;
    color: #ffffff;
}

#banner-close:hover {
    color: #1b1f22;
}

/* Image
.image { border-radius: 4px; border: 0; display: inline-block; position: relative; }
.image:before { pointer-events: none; background-image: url("img/overlay.png"); background-color: rgba(19, 21, 25, 0.5); border-radius: 4px; content: ''; display: block; height: 100%; left: 0; opacity: 0.5; position: absolute; top: 0; width: 100%; }
.image img { border-radius: 4px; display: block; }
.image.left, .image.right { max-width: 40%; }
.image.left img, .image.right img { width: 100%; }
.image.left { float: left; padding: 0 1.5em 1em 0; top: 0.25em; }
.image.right { float: right; padding: 0 0 1em 1.5em; top: 0.25em; }
.image.fit { display: block; margin: 0 0 2rem 0; width: 100%; }
.image.fit img { width: 100%; }
.image.main { display: block; margin: 2.5rem 0; width: 100%; }
.image.main img { width: 100%; }
@media screen and (max-width: 900px) { .image.main { margin: 2rem 0; } }
@media screen and (max-width: 400px) { .image.main { margin: 1.5rem 0; } }
*/

/* List */
ul { list-style: disc; margin: 0 0 1em 0; padding-left: 1em; }
ul li { padding-left: 0.5em; }
ul.alt { list-style: none; padding-left: 0; }
ul.alt li { border-top: solid 1px #ffffff; padding: 0.5em 0; }
ul.alt li:first-child { border-top: 0; padding-top: 0; }

/* Table */
.table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; }
table { margin: 0; width: 100%; }
table tbody tr { border: solid 1px #ffffff; border-left: 0; border-right: 0; }
table tbody tr:nth-child(2n + 1) { background-color: rgba(255, 255, 255, 0.075); }
table td { padding: 0.75em 0.75em; }
table th { color: #ffffff; font-size: 0.9em; font-weight: 600; padding: 0 0.75em 0.75em 0.75em; text-align: left; }
table thead { border-bottom: 0; }

/* Button */
.button { appearance: none; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: transparent; border-radius: 4px; border: 0; box-shadow: inset 0 0 0 1px #ffffff; color: #ffffff !important; cursor: pointer; display: inline-block; font-size: 0.8rem; font-weight: 300; height: 2.75rem; letter-spacing: 0.1rem; line-height: 2.75rem; outline: 0; padding: 0 1rem; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.button:hover { background-color: rgba(255, 255, 255, 0.075); }
.button:active { background-color: rgba(255, 255, 255, 0.175); }

/* BG */
#bg { transform: scale(1.0); position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; }
#bg:before, #bg:after { content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#bg:before { transition: background-color 1s ease-in-out; transition-delay: 0.25s; background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url("img/overlay.png"); background-size: auto, 256px 256px; background-position: center, center; background-repeat: no-repeat, repeat; z-index: 2; }
#bg:after { transform: scale(1.125); transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out; background-image: url("img/bg4.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; }
body.is-article-visible #bg:after { transform: scale(1.0825); filter: blur(0.2rem); }
body.is-preload #bg:before { background-color: #000000; }

/* Wrapper */
#wrapper { display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; min-height: 100vh; width: 100%; padding: 1rem; z-index: 3; }
#wrapper:before { content: ''; display: block; }

/* Header */
#header { display: flex; flex-direction: column; align-items: center; transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; max-width: 100%; text-align: center; }
#header > * { transition: opacity 0.325s ease-in-out; position: relative; margin-top: 2rem; }
#header > *:before { content: ''; display: block; position: absolute; top: calc(-2rem - 1px); left: calc(50% - 1px); width: 1px; height: calc(2rem + 1px); background: #ffffff; }
#header > :first-child { margin-top: 0; }
#header > :first-child:before { display: none; }
#header .logo { width: 5.5rem; height: 5.5rem; line-height: 5.5rem; border: solid 1px #ffffff; border-radius: 100%; }
#header .logo .icon:before { font-size: 2rem; }
#header .content { max-width: 100%; border-style: solid; border-color: #ffffff; border-top-width: 1px; border-bottom-width: 1px; }
#header .content .inner { transition: max-height 0.75s ease, padding 0.75s ease, opacity 0.325s ease-in-out; transition-delay: 0.25s; padding: 2rem 2rem; max-height: 40rem; overflow: hidden; }
#header .content .inner > :last-child { margin-bottom: 0; }
#header .content p { text-transform: uppercase; letter-spacing: 0.1rem; font-size: 0.8rem; line-height: 2; }
#header nav ul { display: flex; margin-bottom: 0; list-style: none; padding-left: 0; border: solid 1px #ffffff; border-radius: 6px; background-color: rgba(0, 0, 0, 0.3); }
#header nav ul li { padding-left: 0; border-left: solid 1px #ffffff; }
#header nav ul li:first-child { border-left: 0; }
#header nav ul li a { display: block; min-width: 8rem; height: 2.75rem; line-height: 2.75rem; padding: 0 1rem; text-transform: uppercase; letter-spacing: 0.2rem; font-size: 0.8rem; }
#header nav ul li a:hover { background-color: rgba(255, 255, 255, 0.2); }
#header nav ul li a:active { background-color: rgba(255, 255, 255, 0.4); }
#header nav.use-middle:after { content: ''; display: block; position: absolute; top: 0; left: calc(50% - 1px); width: 1px; height: 100%; background: #ffffff; }
#header nav.use-middle ul li.is-middle { border-left: 0; }
body.is-article-visible #header { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-preload #header { filter: blur(0.125rem); }
body.is-preload #header > * { opacity: 0; }
body.is-preload #header .content .inner { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* Responsive Nav */
@media screen and (max-width: 900px) {
    #header .content p br { display: none; }
    #header > * { margin-top: 2rem; }
    #header > *:before { top: calc(-2rem - 1px); height: calc(2rem + 1px); }
    #header .logo { width: 4.75rem; height: 4.75rem; line-height: 4.75rem; }
    #header .logo .icon:before { font-size: 1.75rem; }
    #header .content .inner { padding: 2.5rem 1rem; }
    #header .content p { line-height: 1.875; }
    #header nav ul { flex-direction: column; min-width: 10rem; max-width: 100%; border: solid 1px #ffffff; }
    #header nav ul li { border-left: 0; border-top: solid 1px #ffffff; }
    #header nav ul li:first-child { border-top: 0; }
    #header nav ul li a { height: 3rem; line-height: 3rem; min-width: 0; width: 100%; }
    #header nav.use-middle:after { display: none; }
}

/* Main */
#main { flex-grow: 1; flex-shrink: 1; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; position: relative; max-width: 100%; margin: 0 0.5rem; z-index: 3; }
#main article { transition: opacity 0.325s ease-in-out, transform 0.325s ease-in-out; padding: 1rem 2rem; margin: 0 auto; position: relative; width: 100%; max-width: 50rem; background-color: rgba(27, 31, 34, 0.85); border-radius: 6px; opacity: 0; }
#main article.active { opacity: 1; }
#main article .close { display: block; position: absolute; top: 0; right: 0; width: 4rem; height: 4rem; cursor: pointer; text-indent: 4rem; overflow: hidden; white-space: nowrap; }
#main article .close:before { transition: background-color 0.2s ease-in-out; content: ''; display: block; position: absolute; top: 0.75rem; left: 0.75rem; width: 2.5rem; height: 2.5rem; border-radius: 100%; background-position: center; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20px' height='20px' viewBox='0 0 20 20' zoomAndPan='disable'%3E%3Cstyle%3Eline %7B stroke: %23ffffff%3B stroke-width: 1%3B %7D%3C/style%3E%3Cline x1='2' y1='2' x2='18' y2='18' /%3E%3Cline x1='18' y1='2' x2='2' y2='18' /%3E%3C/svg%3E"); background-size: 20px 20px; background-repeat: no-repeat; }
#main article .close:hover:before { background-color: rgba(255, 255, 255, 0.075); }
#main article .close:active:before { background-color: rgba(255, 255, 255, 0.175); }
@media screen and (max-width: 900px) {
    #main article { padding: 0.5rem 1rem; }
    #main article .close:before { top: 0.875rem; left: 0.875rem; width: 2.25rem; height: 2.25rem; background-size: 14px 14px; }
}

/* Footer */
#footer { transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out, opacity 0.325s ease-in-out; width: 100%; max-width: 100%; margin-top: 2rem; text-align: center; }
#footer .copyright { letter-spacing: 0.2rem; font-size: 0.6rem; opacity: 0.7; text-transform: uppercase; }
body.is-article-visible #footer { transform: scale(0.95); filter: blur(0.1rem); opacity: 0; }
body.is-preload #footer { opacity: 0; }