/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  line-height: 0;
  margin: 0;
}

:root {
  interpolate-size: allow-keywords;
}

body {
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

input::placeholder {
  color: inherit;
  opacity: 1;
}

a, p, h1, h2, h3, h4, h5, h6, button, span, aside, section {
  line-height: calc(1em + 0.5rem);
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}
:root {
    --dm-sans: 'DM Sans', Helvetica, sans-serif;
    --league-script: 'League Script', cursive;
    --cutive: 'Cutive', Courier, monotype;

    --black: rgba(0, 0, 0, 0.87);
    --white: #FFFFFC;

    --dusk-blue: #464D77;
    --soft-blush: #FFD9DA;
    --yellow: #FBFF12;
    --neon-pink: #FF206E;
    --deep-walnut: #4C2E05;

    --default-font-size: calc(1rem + 0.5vw);


    font-size: var(--default-font-size);
}

.font-dm-sans {
    font-family: var(--dm-sans);
    font-weight: 300;
    letter-spacing: -5%;
}

.font-league-script {
    font-family: var(--league-script);
    font-size: 1.5em;
    letter-spacing: normal;
}

.font-cutive {
    font-family: var(--cutive);
    letter-spacing: normal;
}

.bg-primary-color {
    background-color: var(--white);
}

.text-primary-color {
    color: var(--black);
}

.text-primary-font {
    font-family: var(--dm-sans);
    font-weight: 300;
    letter-spacing: -5%;
}

strong {
    font-weight: 600;
}

img {
    height: auto;
    width: 100%;
}
header {
    background-color: var(--white);
    grid-area: header;
    position: sticky;
    top: 0;
}

header svg {
    color: var(--black);
    margin: 0 auto;
    width: 10rem;
}

nav {
    grid-area: nav;
    padding: 1rem;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav li {
    line-height: 1;
}

article ul,
article ol {
    padding: 0 0 0 1rem;
}

article ol li::marker {
    font-family: var(--cutive);
}

.wrapper .content {
    grid-area: content;
}

h1 {
    font-size: 1.5rem;
}

article:has(.image-only) h1 {
    display: none;
}

h2 {
    font-size: 1.2rem;
}

article > * {
    margin-bottom: 1rem;
}

article > *:last-of-type:not(:has(+ *)) {
    margin-bottom: 0;
}

a, a:visited {
    color: var(--neon-pink);
    text-decoration: none;
}

a:hover, a:active {
    color: var(--yellow);
    text-decoration: underline;
}

.barter p {
    display: flex;
    gap: .5rem;
}

.i-did {
    line-height: 2;
}

.i-received {
    background-image: linear-gradient(
        to bottom,
        transparent,
        transparent calc(100% - 2px),
        var(--black) calc(100% - 2px));
    background-size: 100% 1.4rem;
    line-height: 1;
    flex: 1;
}

.lockup {
    text-align: center;
}

.lockup h1 img {
    margin: 0 auto;
}

footer {
    display: none;
    text-align: center;
}

article {
    clear: both;
    margin: 0 auto;
    max-width: 60ch;
    padding: 2rem;
}

article li {
    line-height: calc(1em + 0.5rem);
}

article img {
    margin: 1rem;
    shape-margin: 5%;
}

article:has(blockquote) {
    text-align: center;

    h1 {
        display: none;
    }

    blockquote p {
        font-family: var(--cutive);
        font-size: 2.2rem;
        margin-bottom: 1rem;
    }
}

aside {
    border: 1px dashed var(--black);
    clear: both;
    padding: 1rem;
}

.print-only {
    display: none;
}

@media (orientation: landscape) {
    .wrapper {
        /*display: grid;*/
        grid: "header header header header"
        "nav content content content";
    }
}

@media (orientation: portrait) {
    .wrapper {
        
    }

    nav {
        display: none;
    }
}

@media print {
    nav {
        display: none;
    }

    main {
        grid-area: main;
    }

    footer {
        display: block;
        grid-area: footer;
    }

    footer img {
        margin: 0 auto 1rem;
        width: 25%;
    }

    .wrapper {
        display: grid;
        grid: "footer"
            "header"
            "main";
    }

    main {
        display: grid;
        grid: "pagea"
            "pageb"
            "page16"
            "page1"
            "page2"
            "page15"
            "page14"
            "page3"
            "page4"
            "page13"
            "page12"
            "page5"
            "page6"
            "page11"
            "page10"
            "page7"
            "page8"
            "page9"
    }

    article, header, footer, .image-only, .print-only {
        display: flex;
        flex-direction: column;
        height: 100vh;
        place-content: center;
    }

    article[data-order="page-1"] {
        grid-area: page1;
    }

    article[data-order="page-2"] {
        grid-area: page2;
    }

    article[data-order="page-3"] {
        grid-area: page3;
    }

    article[data-order="page-4"] {
        grid-area: page4;
    }

    article[data-order="page-5"] {
        grid-area: page5;
    }

    article[data-order="page-6"] {
        grid-area: page6;
    }

    article[data-order="page-7"] {
        grid-area: page7;
    }

    article[data-order="page-8"] {
        grid-area: page8;
    }

    article[data-order="page-9"] {
        grid-area: page9;
    }

    article[data-order="page-10"] {
        grid-area: page10;
    }

    article[data-order="page-11"] {
        grid-area: page11;
    }

    article[data-order="page-12"] {
        grid-area: page12;
    }

    article[data-order="page-13"] {
        grid-area: page13;
    }

    article[data-order="page-14"] {
        grid-area: page14;
    }

    article[data-order="page-15"] {
        grid-area: page15;
    }

    article[data-order="page-16"] {
        grid-area: page16;
    }

    article[data-order="page-a"] {
        grid-area: pagea;
    }

    article[data-order="page-b"] {
        grid-area: pageb;
    }

    .i-received {
        print-color-adjust: exact;
    }

    .no-print {
        display: none;
    }
}