/* ------------------------ TYPOGRAPHY ------------------------ */

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
    src:
        local("Berkeley Mono Regular"),
        url("berkeley-mono/BerkeleyMono-Regular.woff") format("woff"),
        url("berkeley-mono/BerkeleyMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 400;
    font-style: italic;
    font-stretch: normal;
    src:
        local("Berkeley Mono Regular"),
        url("berkeley-mono/BerkeleyMono-Italic.woff") format("woff"),
        url("berkeley-mono/BerkeleyMono-Italic.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    src:
        local("Berkeley Mono Bold"),
        url("berkeley-mono/BerkeleyMono-Bold.woff") format("woff"),
        url("berkeley-mono/BerkeleyMono-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Berkeley Mono";
    font-weight: 600;
    font-style: italic;
    font-stretch: normal;
    src:
        local("Berkeley Mono Bold"),
        url("berkeley-mono/BerkeleyMono-BoldItalic.woff") format("woff"),
        url("berkeley-mono/BerkeleyMono-BoldItalic.woff2") format("woff2");
}

:root {
    --t-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
        sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    --t-body: "Berkeley Mono";
    text-rendering: optimizeSpeed;
    -webkit-text-size-adjust: 100%;
    --t-body-lh: var(--sp-2);
    --t-body-weight: 400;
    --t-body-size: 0.8rem;
    --t-heading-size: 0.8rem;
    --t-heading-weight: 600;
    text-transform: uppercase;

    /*   overrides for readability */
    --t-body: var(--t-system);
    text-transform: inherit;
}

@media only screen and (max-width: 960px) {
    :root {
        --t-body-lh: var(--sp-2);
        --t-body-weight: 400;
        --t-body-size: 0.75rem;
        --t-heading-size: 0.75rem;
        --t-heading-weight: 600;
    }
}

h1,
h2,
h3,
h4,
h5 {
    font-size: var(--t-heading-size);
    font-weight: var(--t-heading-weight);
    margin: 0;
    padding: 0;
    padding-bottom: var(--sp-2);
}

h1 {
    color: var(--c-neutral-primary);
    padding-bottom: 0;
    margin: 0;
    padding-bottom: var(--sp-2);
    /* font-weight: normal; */
}

h4 {
    color: var(--c-neutral-primary);
    padding-bottom: 1rem;
}

p {
    color: var(--c-neutral-primary);
    font-weight: var(--t-body-weight);
    font-size: var(--t-body-size);
    margin: 0;
    padding-bottom: var(--sp-2);
    max-width: 44rem;
}

/* ------------------------ COLOR ------------------------ */

:root {
    --c-surface: #222;
    --c-neutral-primary: #fafafa;
    --c-tint-primary: #ff4f00;
    --c-highlight: #fff;
    --c-hightlight-surface: #000;
}

@media (prefers-color-scheme: light) {
    :root {
        --c-surface: #eee;
        --c-neutral-primary: #222;
        --c-tint-primary: #ff4f00;
        --c-highlight: #000;
        --c-hightlight-surface: #fff;
    }
}

/* ------------------------ SPACING ------------------------ */

:root {
    --col-width: 38rem;
    --sp-05: 0.5rem;
    --sp-1: 1rem;
    --sp-2: 1.25rem;
    --sp-3: 2.5rem;
}

@media only screen and (max-width: 960px) {
    :root {
        --col-width: 38rem;
        --sp-05: 0.5rem;
        --sp-1: 1rem;
        --sp-2: 1.25rem;
        --sp-3: 2.5rem;
    }
}

/* ------------------------ GENERAL ------------------------ */

body {
    background-color: var(--c-surface);
    color: var(--c-neutral-primary);
    font-family: var(--t-body);
    font-size: var(--t-body-size);
    line-height: var(--sp-2);
    padding: 8vh 8vw;
}

@media only screen and (max-width: 40rem) {
    body {
        padding: 4vh 4vw;
    }
}

nav {
    max-width: var(--col-width);
    margin-bottom: 2rem;
}

main {
    max-width: var(--col-width);
}

#main-nav {
    margin: 0;
    padding: 0;
}

/* ------------------------ NAV ------------------------ */

nav ul {
    list-style-type: none;
    margin: 0;
    text-indent: 0;
}

nav ul li {
    margin: 0;
}

nav a {
    display: block;
}

/* ------------------------ UI / COMPONENTS ------------------------ */

a {
    color: inherit;
}

a:focus,
a:hover {
    background: var(--c-tint-primary);
    color: var(--c-surface);
    outline: 2px solid var(--c-tint-primary);
}

hr {
    border: none;
    border-bottom: 1px solid var(--c-neutral-primary);
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 2rem;
}

/* ------------------------ LISTS ------------------------ */

ul {
    --line-inset: 1.4em;
    padding: 0;
    padding-bottom: var(--sp-2);
    list-style-type: "- ";
    display: table;
    margin: 0;
}

ul > li {
    padding: 0;
    margin: 0;
    display: table-row;
}

ul > li::before {
    content: "-";
    display: table-cell;
    padding-right: var(--sp-05);
}

ol {
    counter-reset: ol_count;
    display: table;
    padding: 0;
    margin: 0;
    padding-bottom: var(--sp-2);
}

ol > li {
    counter-increment: ol_count;
    display: table-row;
}

ol > li::before {
    content: counter(ol_count) ".";
    display: table-cell;
    text-align: right;
    padding-right: var(--sp-05);
}
s

/* ------------------------ CONTENT ------------------------ */

article {
    padding-bottom: 1rem;
    margin: 0;
}

section {
    padding-bottom: 1rem;
}

details summary {
    cursor: pointer;
}

img,
iframe,
figure {
    max-width: 100%;
}

p img:only-child {
    margin-top: calc(var(--t-body-lh) * 0.5);
    margin-bottom: calc(var(--t-body-lh) * 0.5);
}

.details-inner {
    background: #fff;
}

::selection {
    background: var(--c-tint-primary);
    color: var(--c-highlight);
    color: #fff;
}

.credits-list dt {
    float: left;
    clear: left;
    margin-right: 1rem;
}

.credits-list dt::after {
    content: ":";
}

figure {
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

figcaption {
    width: 100%;
    flex-grow: 2;
    flex-wrap: nowrap;
}

article h3 {
    padding-bottom: var(--sp-2);
}

/* ------------------------ LAYOUTS ------------------------ */

/* broadsheet layout */

.broadsheet-layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1.25fr 3fr 2fr;
    width: 80vw;
    max-width: 100em;

    & .main-header {
        grid-row-start: 1;
        grid-row-end: 2;
    }

    & .main-nav {
        grid-row-start: 2;
        grid-row-end: auto;
    }

    & .content-nav {
        grid-row-start: 2;
        grid-row-end: 8;
        grid-column-start: 1;
        grid-column-end: 2;
    }

    & .content-header {
        grid-column-start: 2;
        grid-column-end: 4;
    }

    & .hero {
        grid-column-start: 2;
        grid-column-end: 4;
    }

    & aside {
        grid-column-start: 3;
        grid-column-end: 4;
    }

    & .aside-left {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    & .main-content {
        grid-row-start: 2;
        grid-column-start: 2;
        grid-column-end: 3;
    }
}

.broadsheet-layout:has(.hero) {
    & .main-content {
        grid-row-start: 3;
    }
}

.primary-nav a {
    display: inline;
}

dl {
    margin: 0;
}

dt {
    font-weight: bold;
    margin: 0;
    display: block;
    padding: 0;
}

dd {
    margin: 0;
    padding-bottom: var(--sp-2);
}

dd ul {
    padding: 0;
}

/* tabet ish */
@media only screen and (max-width: 60rem) {
    .broadsheet-layout {
        grid-template-columns: 1.5fr 3fr;
    }
}

/* phone ish */
@media only screen and (max-width: 40rem) {
    .broadsheet-layout {
        display: flex;
        flex-direction: column;
        gap: 0;
        /* grid-template-columns: 1fr; */

        /* & .content-header, & .content-header, {
            grid-column-start: 1;
            grid-column-end: 1;
        }

        & > * {
            border: 1px solid red;
            grid-column-start: 1;
            grid-column-end: 1;
        } */
    }
}

/* to sort */

video {
    border: 1px solid #444;
}