:root { color-scheme: dark; font-family: "Archivo Black", system-ui, sans-serif; background: #141411; color: #f5efdf; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem max(1rem, calc((100vw - 75rem) / 2)); border-bottom: 1px solid #444238; }
a { color: inherit; }
header a { font-weight: 800; text-decoration: none; }
main { max-width: 77rem; margin: auto; padding: 0 1rem 4rem; }
header { align-items: center; }
.brand { display: inline-flex; align-items: center; gap: .5rem; }
.brand img { width: 2.4rem; height: 2.4rem; object-fit: contain; }
.hero {
  margin-inline: -1rem;
  padding: clamp(1.5rem, 4vw, 3rem) 1rem 2rem;
  background: #faf9f6;
  color: #151410;
  text-align: center;
}
.wordmark { display: block; width: min(100%, 30rem); height: auto; margin: auto; }
.hero h1 { margin: .25rem 0 1.25rem; color: #ad3518; font-size: clamp(1rem, 3vw, 1.45rem); text-transform: uppercase; }
.hero video { display: block; width: min(100%, 42.5rem); height: auto; margin: auto; background: #171614; }
.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1.25rem; }
.hero .button { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .9rem; background: #161514; color: #fff; border-color: #161514; }
.hero .button:focus-visible { outline-color: #ad3518; }
#shop, #cart { padding-top: 2rem; }
#products { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
article { background: #24241e; padding: 1rem; }
article img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #e9e5db; }
h3 { font-size: 1rem; }
label { display: grid; gap: .35rem; margin: .7rem 0; }
button, select, input, .button { font: inherit; padding: .55rem; border-radius: 0; }
button, .button { display: inline-block; background: #ffd05b; color: #17150c; border: 1px solid #ffd05b; font-weight: 800; text-decoration: none; cursor: pointer; }
button:disabled { opacity: .55; cursor: default; }
select, input { width: 100%; }
#lines > div { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #444238; }
#lines input { width: 6rem; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.store-footer { margin-top: 2rem; font-size: .8125rem; text-align: center; }