/* 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: #FFF5EE;
    color: var(--black);
}

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;
}

ul {
    list-style: none;
}

/* 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-1: clamp(3.45rem, 3.4309rem + 0.1018vw, 3.5938rem);
    --step-2: clamp(4.14rem, 4.0932rem + 0.2493vw, 4.4922rem);
    --step-3: clamp(4.968rem, 4.8821rem + 0.4582vw, 5.6152rem);
    --step-4: clamp(5.9616rem, 5.8212rem + 0.7486vw, 7.019rem);
    --step-5: clamp(7.1539rem, 6.9389rem + 1.1468vw, 8.7738rem);
    --step-6: clamp(8.5847rem, 8.2684rem + 1.6868vw, 10.9673rem);
    --step-7: clamp(10.3016rem, 9.8493rem + 2.4123vw, 13.7091rem);

    /* @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-4xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
    --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);
    --space-2xl: clamp(11.5rem, 11.5rem + 0vw, 11.5rem);
    --space-3xl: clamp(17.25rem, 17.25rem + 0vw, 17.25rem);

    /* One-up pairs */
    --space-4xs-3xs: clamp(0.3125rem, 0.2544rem + 0.3097vw, 0.75rem);
    --space-3xs-2xs: clamp(0.75rem, 0.6587rem + 0.4867vw, 1.4375rem);
    --space-2xs-xs: clamp(1.4375rem, 1.3379rem + 0.531vw, 2.1875rem);
    --space-xs-s: clamp(2.1875rem, 2.0962rem + 0.4867vw, 2.875rem);
    --space-s-m: clamp(2.875rem, 2.6842rem + 1.0177vw, 4.3125rem);
    --space-m-l: clamp(4.3125rem, 4.1217rem + 1.0177vw, 5.75rem);
    --space-l-xl: clamp(5.75rem, 5.3684rem + 2.0354vw, 8.625rem);
    --space-xl-2xl: clamp(8.625rem, 8.2434rem + 2.0354vw, 11.5rem);
    --space-2xl-3xl: clamp(11.5rem, 10.7367rem + 4.0708vw, 17.25rem);

    /* Custom pairs */
    --space-s-l: clamp(2.875rem, 2.4934rem + 2.0354vw, 5.75rem);

/*    Colours*/
    --black: #242124;
    --link: #E86100;
    --visited-link: #8A3324;
    --hover: #568203;
}

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

/*@font-face {*/
/*    font-family: "Gowun Batang Regular";*/
/*    src: url('/GowunBatang-Regular.ttf') format('ttf');*/
/*    font-display: swap;*/
/*}*/


/*@font-face {*/
/*    font-family: "Gowun Batang Bold";*/
/*    src: url('/GowunBatang-Bold.ttf') format('ttf');*/
/*    font-display: swap;*/
/*}*/


.container {
    margin: 0 var(--space-xs);
}

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

article {
    max-width: 120ch;
    margin-left: auto;
    margin-right: auto;
}

.donation-container {
    border: #242124 solid thick;
    padding: 1em;
    border-radius: 1em;
    max-width: 80ch;
    margin-left: auto;
    margin-right: auto;
}

.donation-container h2 {
    font-size: var(--step--3);
    line-height: var(--space-3xs);
}

a {
    color: var(--link);
    /*text-decoration: none;*/
}
a:visited {
    color: var(--visited-link);
}
a:hover {
    color: var(--hover);
}

#home-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(--black);
}

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

h2 {
    font-size: var(--step--1);
    line-height: var(--space-s);
}

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

.sales-pitch {
    margin-top: var(--space-3xs);
}

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

.codeblock {
    max-width: fit-content;
}

.home-h2 {
    font-size: var(--step--2);
}

p, ul, ol {
    font-size: var(--step--4);
    line-height: var(--space-xs);
    max-width: 80ch;
    margin-top: var(--space-3xs);
}
#subheading {
    font-size: var(--step--1);
    line-height: 1;
}
.note {
    font-size: var(--step--4);
    font-weight: 900;
    margin-top: var(--space-3xs);
}

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

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

#what-we-do {
    font-size: var(--step--1);
    margin-bottom: var(--space-4xs);
    max-width: 40ch;
    line-height: var(--space-s);
}

.grid {
    display: grid;
}

.inline-grid {
    display: inline-grid;
}

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

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

#nav-list {
    font-size: var(--step--5);
}
#nav-list, #footer-list {
    display: inline-flex;
    flex-wrap: wrap;
    column-gap: var(--space-3xs);
    font-family: 'Gowun Batang';
    font-weight: 900;
    line-height: 1.2;
}

#footer-list {
    font-size: var(--step--5);
}

.nav-a {
    text-decoration: none;
}

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

.nav-a:hover {
    color: var(--hover);
}

.bold {
    font-weight: 900;
}

#intro, #testimonials, #previous-companies, .flex-containers-group, footer {
    margin-top: var(--space-xs);
}

#contact {
    padding: var(--space-3xs);
    font-size: var(--step-0);
    font-family: 'Gowun Batang';
    font-weight: 900;
    max-width: fit-content;
}

.flex-containers-group {
    display: flex;
    column-gap: var(--space-xs);
    flex-wrap: wrap;
}

.secondary-container {
    margin-bottom: var(--space-3xs);
    max-width: 80ch;
}

.company-role, .author {
    margin-bottom: var(--space-3xs);
    font-size: var(--step--4);
}

.testimonial-text {
    margin-top: var(--space-xs);
}

#nav-list {
    display: inline-flex;
}

#previous-companies-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-s);
    justify-content: center;
}

.previous-company > img {
    max-width: 15rem;
}

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

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

.services {
    display: grid;
    column-gap: var(--space-xs);
    grid-template-columns: repeat(auto-fit, minmax(40ch, 1fr));
    margin-top: var(--space-xs);
}

.service {
    margin-bottom: var(--space-s);
}
.service-offerings {
    margin-left: var(--space-xs)
}

.sponsor-cta-container {
    justify-self: center;
    margin-top: var(--space-xs);
    font-size: var(--step--4)
}

.sponsor-cta {
    border-radius: 1rem;
    padding: .1rem 1rem;
    font-weight: 900;
    max-height: 2.2rem;
    background-color: var(--link);
    color: white;
    text-decoration: none;
    font-family: Analog;
    padding: var(--space-3xs);
}

.sponsor-cta:visited{
    color: white;
}

.support-thanks {
    justify-self: center;
}


.related-work-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    /*margin: var(--space-3xs) 0 var(--space-xs) 0;*/
}

.list-inner-heading {
    font-size: var(--step--3);
}

.li-element-spacing {
    margin-top: var(--space-xs);
    margin-bottom: var(--space-3xs);
}

.permalink {
    font-size: var(--step--4);
}

.pagination-list {
    display: inline-flex;
    gap: 1rem;
    font-size: var(--step--5);
}

.feature-type {
    border-radius: 1rem;
    padding: .1rem 1rem;
    font-size: var(--step--5);
    font-weight: 900;
    max-height: 2.2rem;
}

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

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

.lola-speaker, .alt-speaker {
    font-weight: bold;
}

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

#w3c-logo {
    min-width: var(--step-7);
}

@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;}