:root {
    /* colors */
    --clr-primary-800: hsl(180 1% 22%);

    --clr-neutral-200: hsl(178 3% 95%);

    --clr-accent-200: hsl(181 38% 79%);
    --clr-accent-500: hsl(9 67% 51%);

    /* typography */
    --ff-primary: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
    --ff-seconday: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;

    --ff-body: var(--ff-seconday);
    --ff-heading: var(--ff-primary);

    --fw-regular: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;

    --fs-100: .45rem;
    --fs-200: .65rem;
    --fs-300: .85rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.1875rem;
    --fs-700: 2rem;
    --fs-800: 2.5rem;
    --fs-900: 3rem;
    --fs-999: 4rem;

    --fs-body: var(--fs-400);
    --fs-nav: var(--fs-400);
    --fs-button: var(--fs-500);
    --fs-primary-heading: var(--fs-600);
    --fs-secondary-heading: var(--fs-400);

    --size-200: 0.5rem;
    --size-300: .75rem;
    --size-400: 1rem;
    --size-500: 1.25rem;
    --size-600: 1.5rem;
    --size-700: 1.75rem;
    --size-800: 2rem;
    --size-900: 3rem;
    --size-999: 4rem;
}

@media (min-width: 50em) {
    :root {
        --fs-primary-heading: var(--fs-800);
        --fs-secondary-heading: var(--fs-600);
    }
}

/* https://piccalil.li/blog/a-modern-css-reset */

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

/* Remove default margin */
* {
    margin: 0;
    padding: 0;
    font: inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
html,
body {
    height: 100%
}
body {
    text-rendering: optimizeSpeed;
    line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
/* ref: https://codepen.io/padunk/pen/QWbLZrG?editors=1100 */
img,
picture,
svg,
figure {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* general styling */

body {
    font-size: var(--fs-body);
    font-family: var(--ff-body);
    color: var(--clr-primary-800);
    background-color: var(--clr-neutral-200);
}

h1,
h2,
h3 {
    font-family: var(--ff-heading);
    text-transform: uppercase;
}

/* navigation */

.primary-header {
    --margin-size: var(--size-400);

    margin-block: var(--margin-size);
}

.primary-header a {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 50em) {
    .primary-header {
        --margin-size: 10.06rem;
        margin-bottom: unset;
    }
}

.header-grid {
    display: grid;
    gap: var(--fs-400);
    justify-items: center;
    align-items: stretch;
}

@media (max-width: 50em) {
    .header-grid {
        gap: var(--size-200);
        grid-template-columns: auto 1fr;
        justify-items: flex-start;
        align-items: center;
    }
}

.logo {
    width: 1.8rem;
}

@media (min-width: 50em) {
    .logo {
        width: 30.625rem;
    }
}

.mobile-nav-toggle {
    display: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0.5em;
}

@media (max-width: 50em) {
    .mobile-nav-toggle {
        display: block;
        grid-row: 1;
        grid-column: 1;
    }
}

.mobile-nav-toggle[aria-expanded=false] .icon-menu  { display: block; }
.mobile-nav-toggle[aria-expanded=true] .icon-menu   { display: none; }
.mobile-nav-toggle[aria-expanded=false] .icon-close { display: none; }
.mobile-nav-toggle[aria-expanded=true] .icon-close  { display: block; }

.primary-navigation {
    margin-block: 1.12rem;
}

@media (max-width: 50em) {
    .primary-navigation {
        display: none;
        grid-column: 2;
    }

    .primary-navigation[data-visible] {
        display: block;
    }
}

.nav-list {
    display: flex;
    gap: 4.2rem;
    font-size: var(--fs-nav);
    text-transform: uppercase;
    font-family: var(--ff-heading);
}

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


@media (max-width: 50em) {
    .nav-list {
        display: grid;
        gap: var(--size-300);
        font-weight: var(--fw-bold);
    }

    .nav-list a:hover,
    .nav-list a:focus-visible {
        color: var(--clr-accent-500);
    }
}

/* button */

.button {
    cursor: pointer;
    text-decoration: none;
    border: 0;
    font-weight: var(--fw-bold);
    font-size: var(--fs-button);
    line-height: 1;
    padding: 1.25rem 2.5rem;
    color: var(--clr-neutral-200);
    background-color: var(--clr-primary-800);
    box-shadow: 0 1.125em 1em -1em var(--clr-primary-800);
    text-transform: uppercase;
}

.button:hover,
.button:focus-visible {
    background-color: var(--clr-accent-500);
}

/* content */

main > * + *,
footer {
    --section-margin: 2rem;
    margin-top: var(--section-margin);
}

@media (min-width: 50em) {
    main > * + *,
    footer {
        --section-margin: 7rem;
    }
}

.section-heading {
    font-weight: var(--fw-bold);
    margin-top: var(--fs-700);
    text-decoration: underline;
}

.line-section {
    border-top: .125rem solid var(--clr-primary-800);
}

figcaption {
    font-size: var(--fs-200);
}

figcaption a {
    color: inherit;
}

.text-sections > * + * {
    margin-block: var(--size-700);
}

a {
    color: var(--clr-primary-800);
}

a:hover, a:focus {
    color: var(--clr-accent-500)
}

.list > li {
    margin-left: 3rem;
}

dl {
    display: grid;
    grid-template-columns: max-content auto;
    gap: .5rem;
}

dt {
    font-weight: var(--fw-bold);
    grid-column-start: 1;
}

dd {
    grid-column-start: 2;
}

.guitar-placeholder {
    object-fit: contain;
}

@media (min-width: 50em) {
    .guitar-placeholder {
        height: 650px;
    }
}

.gear {
    display: grid;
    gap: 3rem;
}

.gear figure {
    display: grid;
}

.gear-photo {
    object-fit: cover;
}

.gear-caption {
    text-align: center;
    font-size: var(--fs-400);
    padding: .5rem;
}


@media (min-width: 50em) {
    .gear {
        grid-template-columns: repeat(4, 1fr);
        row-gap: 0;
    }

    .gear figure {
        grid-template-rows: 1fr 1fr;
    }
}

/* gallery */
/* https://www.youtube.com/watch?v=VN6l8lit2no */
.gallery {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    grid-auto-rows: 10rem;
    grid-auto-flow: dense;
}

.gallery .photo:first-child {
    grid-area: span 2 / span 2;
}

.gallery .photo:nth-child(4n+1) {
    grid-row: span 2;
}

.gallery .photo:nth-child(4n+1) {
    grid-column: span 2;
}

footer {
    margin-top: var(--size-999);
    padding: var(--size-700);
    text-align: right;
}

footer a {
    color: var(--clr-neutral-200);
    text-decoration: none;
}

footer a:hover,
footer a:focus {
    color: var(--clr-accent-500);
}

.footer-grid {
    display: grid;
    gap: var(--size-400);
    justify-items: end;
    grid-template-columns: 1fr auto;
}

.footer-grid-left {
    grid-column: 1 / 1;
}

.footer-grid-right {
    grid-column: 2 / 2;
}

.no-one-is-illegal-logo img {
    width: 2.5rem;
    background-color: var(--clr-neutral-200);
}

/* utility classes */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.text-primary-800     { color: var(--clr-primary-800); }
.text-neutral-200     { color: var(--clr-neutral-200); }
.text-accent-200      { color: var(--clr-accent-200); }
.text.accent-500      { color: var(--clr-accent-500); }

.bg-primary-800       { background-color: var(--clr-primary-800); }
.bg-neutral-200       { background-color: var(--clr-neutral-200); }
.bg-accent-200        { background-color: var(--clr-accent-200); }
.bg.accent-500        { background-color: var(--clr-accent-500); }

.fw-regular           { font-weight: var(--fw-regular); }
.fw-semi-bold         { font-weight: var(--fw-semi-bold); }
.fw-bold              { font-weight: var(--fw-bold); }

.fs-primary-heading   { font-size: var(--fs-primary-heading); }
.fs-secondary-heading { font-size: var(--fs-secondary-heading); }

.fs-100               { font-size: var(--fs-100); }
.fs-200               { font-size: var(--fs-200); }
.fs-300               { font-size: var(--fs-300); }
.fs-400               { font-size: var(--fs-400); }
.fs-500               { font-size: var(--fs-500); }
.fs-600               { font-size: var(--fs-600); }
.fs-700               { font-size: var(--fs-700); }
.fs-800               { font-size: var(--fs-800); }

.mt-1                 { margin-top: var(--fs-400); }
.mt-2                 { margin-top: var(--fs-500); }
.mt-3                 { margin-top: var(--fs-600); }
.mt-4                 { margin-top: var(--fs-700); }
.mt-5                 { margin-top: var(--fs-800); }
.mt-6                 { margin-top: var(--fs-900); }
.mt-7                 { margin-top: var(--fs-999); }

.bucket {
    --max-width: 1110px;
    --padding: 1rem;

    width: min(var(--max-width), 100% - var(--padding) * 2);
    margin-inline: auto;
}

/* https://codepen.io/padunk/pen/QWbLZrG?editors=1100 */
.even-columns {
    display: grid;
    gap: var(--size-700);
    width: 100%;
    height: 100%;
}

@media (min-width: 50em) {
    .even-columns {
        grid-auto-flow: column;
    }
}

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

.centered-grid {
    display: grid;
    gap: var(--fs-700);
    justify-items: center;
}

.two-column-grid {
    display: grid;
    gap: var(--size-600);
    grid-template-areas:
        "image"
        "text";
}

.two-column-grid-image { grid-area: image; }
.two-column-grid-text { grid-area: text; }

@media (min-width: 50em) {
    .two-column-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: unset;
        gap: var(--size-800);
        align-items: start;
    }

    .two-column-grid-image { grid-area: unset; }
    .two-column-grid-text { grid-area: unset; }
}

.hide-small { display: none; }
.hide-large { display: block; }

@media (min-width: 50em) {
    .hide-small { display: block; }
    .hide-large { display: none; }

}

.underline { text-decoration: underline; }