/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    font-family: "Gowun Batang", Serif;
    background-color: var(--bg);
    color: var(--text);
    background-image: url("../images/blue-mesh-grid.svg");
    background-size: contain;
    background-position: center;
    margin: 0 var(--space-xs);
    font-size: var(--font-size-small);
}

strong {
    font-weight: bold;
}
ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Base styles */

:root {
    /* @link https://utopia.fyi/type/calculator?c=300,46,1.2,2560,46,1.25,6,5,&s=0.75|0.5|0.25|0.1,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --step--5: clamp(0.9421rem, 1.1837rem + -0.151vw, 1.1554rem);
    --step--4: clamp(1.1776rem, 1.4142rem + -0.1479vw, 1.3865rem);
    --step--3: clamp(1.472rem, 1.6892rem + -0.1358vw, 1.6638rem);
    --step--2: clamp(1.84rem, 2.0173rem + -0.1108vw, 1.9965rem);
    --step--1: clamp(2.3rem, 2.4086rem + -0.0678vw, 2.3958rem);
    --step-0: clamp(2.875rem, 2.875rem + 0vw, 2.875rem);
    --step-6: clamp(8.5847rem, 8.2684rem + 1.6868vw, 10.9673rem);

    --font-size-small: var(--step--4);
    --font-size-xsmall: var(--step--5);

    /* @link https://utopia.fyi/clamp/calculator?a=300,2560,-14—-22&p=l-space */
    --l-space-14-22: clamp(-1.375rem, -0.8086rem + -0.354vw, -0.875rem);

    --space-3xs: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
    --space-2xs: clamp(1.4375rem, 1.4375rem + 0vw, 1.4375rem);
    --space-xs: clamp(2.1875rem, 2.1875rem + 0vw, 2.1875rem);
    --space-s: clamp(2.875rem, 2.875rem + 0vw, 2.875rem);
    --space-m: clamp(4.3125rem, 4.3125rem + 0vw, 4.3125rem);
    --space-l: clamp(5.75rem, 5.75rem + 0vw, 5.75rem);
    --space-xl: clamp(8.625rem, 8.625rem + 0vw, 8.625rem);

/*    Colours*/
    --link: rgb(226,255,50);
    --bg: rgb(0, 14, 105);
    --text: #eff1ff;
    --visited-link: #ff97cc;
}

@font-face {
    font-family: "Analog";
    src: url('/assets/fonts/F37Analog-Bold.woff2') format('woff2'),
         url('/assets/fonts/F37Analog-Bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: "Gowun Batang";
    src: url('/assets/fonts/GowunBatang-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
    unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Gowun Batang";
    src: url('/assets/fonts/GowunBatang-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-024F, U+0259, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0300-036F, U+1E00-1EFF, U+2000-206F, U+20A0-20CF, U+2113, U+2122, U+2191, U+2193, U+2212, U+2215, U+2C60-2C7F, U+A720-A7FF, U+FEFF, U+FFFD;
}

h1, h2, h3, h4, h5 {
    font-family: "Analog";
}

article {
    max-width: 65rem;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--bg);
}


a {
    color: var(--link);
}
a:visited {
    color: var(--visited-link);
}

#footer-logo {
    font-size: var(--step-6);
    letter-spacing: var(--l-space-14-22);
}


#logo {
    letter-spacing: -.3rem;
    text-decoration: none;
}
#logo, #logo:visited, #logo:hover {
    color: var(--text);
}

h1 {
    font-size: var(--step-0);
}

h2 {
    font-size: var(--step--1);
}

h3 {
    font-size: var(--step--2);
}

#site-header {
    display: inline-flex;
    gap: 1rem;
    flex-wrap: wrap;
}

#alt-logo {
    align-self: end;
}

#site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
}

p, ul, ol {
    line-height: var(--space-xs);
    max-width: 80ch;
    margin-top: var(--space-3xs);
}

#footer-tagline {
    font-size: var(--step--2);
    font-family: monospace;
    max-width: 30ch;
}

#home-content {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: var(--space-l);
    font-family: monospace;
    margin-bottom: var(--space-xl);
    margin-top: var(--space-xs);

}

#home-content section, #home-content nav {
    max-width: 32rem;
}

#support p:not(:last-child) {
    margin-bottom: var(--space-xs);
}

.highlights {
    align-self: center;
}

.home-nav-item {
    color: #ffa444;
}

.highlights ul li {
    margin-top: var(--space-xs);
}


.note {
    font-weight: 900;
    margin-top: var(--space-3xs);
}

.feature-venue {
    font-size: var(--font-size-small);
}

.bulleted-list {
    list-style: initial;
    margin-left: var(--space-2xs);
}

.block-list > li {
    margin-bottom: var(--space-3xs);
}

.inline-flex {
    display: flex;
    gap: 1rem;
}

header {
    padding-top: var(--space-s);
}

#resource-list {
    margin-bottom: var(--space-3xs);
    max-width: 80ch;
}

#page-heading, .h2-heading {
    margin-top: var(--space-s);
}

.h2-heading {
    margin-bottom: var(--space-m);
}

#support-cta {
    background-color: var(--link);
    color: var(--bg);
    text-decoration: none;
    font-family: monospace;
    padding: var(--space-3xs);
}

#support-cta:visited{
    color: var(--bg);
    font-weight: bold;
}

#support-cta:hover {
    background-color: var(--bg);
    color: var(--link);
}

#support-cta-alt {
    font-weight: bold;
    font-family: "Analog";
    letter-spacing: 0.05rem;
}

#resource-list > li {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-3xs);
}

#pagination-list {
    display: inline-flex;
    gap: 1rem;
    margin-bottom: var(--space-m);
    margin-top: var(--space-s);
}

#copyright {
    margin-bottom: var(--space-2xs);
}

.video-feature, .lola-speaker {
    background-color: #e1a0ff;
}

.pod-feature, .alt-speaker {
    background-color: #ffa444;
}

.video-feature, .pod-feature {
    color: var(--bg);
}

.label {
    font-weight: bold;
    color: var(--bg);
    padding: .1rem 1rem;
    border-radius: 1rem;
    max-height: 2.2rem;
    font-size: var(--font-size-xsmall);
}

[aria-current] {
    font-weight: bold;
}

@media screen and (max-device-width: 480px){
    body{
        -webkit-text-size-adjust: 100%;
    }
}

/* Diagnostics CSS special thanks to Eric Meyers: https://meyerweb.com/eric/tools/css/diagnostics/diagnostic.css */
div:empty, span:empty,
li:empty, p:empty,
td:empty, th:empty {padding: 0.5em; background: yellow;}

/**[style], font, center {outline: 5px solid red;}*/
*[class=""], *[id=""] {outline: 5px dotted red;}

img[alt=""] {border: 3px dotted red;}
img:not([alt]) {border: 5px solid red;}

table:not([summary]) {outline: 5px solid red;}
table[summary=""] {outline: 3px dotted red;}
th {border: 2px solid red;}
th[scope="col"], th[scope="row"] {border: none;}

/*a[href]:not([aria-label]) {border: 5px solid red;}*/
a[title=""] {outline: 3px dotted red;}
a[href="#"] {background: lime;}
a[href=""] {background: fuchsia;}