:root {
  --berry: #562c43;
  color-scheme: light;
  font: 100%/1.55 system-ui, sans-serif;
  color: #292120;
  background: #fffaf4;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #98411e; outline-offset: 5px; }
.skip { position: absolute; inset-inline-start: 1rem; top: -8rem; background: white; padding: .5rem; z-index: 1; }
.skip:focus { top: .5rem; }
.shell { width: min(1220px, calc(100% - 3rem)); margin-inline: auto; }
.header, .footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; }
.header { justify-content: space-between; }
.wordmark, nav a { text-decoration: none; }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; color: var(--berry); }
.wordmark svg { display: block; width: clamp(7rem, 14vw, 9.375rem); height: auto; }
nav { display: flex; flex-wrap: wrap; gap: 1.1rem; font-size: .92rem; }
nav a:hover { text-decoration: underline; }
.hero { background: linear-gradient(120deg, #ffead5, #fae0e8 58%, #eee4fa); border-radius: 2rem; overflow: hidden; border: 1px solid #f1ddd3; }
.hero-copy { text-align: center; padding: clamp(2rem, 5vw, 4.1rem) 1.2rem clamp(1.6rem, 4vw, 2.9rem); }
.eyebrow { font-size: .74rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 750; color: #81412f; margin: 0 0 .55rem; }
.hero-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; margin-bottom: 1rem; border-radius: 3rem; color: var(--berry); background: #fffaf4; }
.hero-tag span { font-size: .96rem; line-height: 1; }
h1, h2 { font-family: Georgia, serif; font-weight: 500; line-height: 1.02; text-wrap: balance; }
h1 { margin: 0; font-size: clamp(2.65rem, 7.2vw, 6rem); letter-spacing: -.055em; color: var(--berry); }
h2 { margin: 0; font-size: clamp(2.2rem, 5vw, 4.1rem); letter-spacing: -.04em; }
h3 { margin: 0 0 .3rem; font-size: 1.07rem; }
.intro { margin: 1rem auto 1.3rem; max-width: 39rem; color: #58413a; }
.actions { display: flex; align-items: center; justify-content: center; gap: .8rem 1rem; flex-wrap: wrap; }
.button, .amazon-link { display: inline-flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 3rem; font-weight: 650; }
.button { background: var(--berry); color: white; text-decoration: none; }
.button:hover { background: #75425c; }
.availability { color: #613e37; font-size: .88rem; font-weight: 650; }
.lineup, .lineup img { display: block; width: 100%; height: auto; }
.collection { padding-block: clamp(3rem, 7vw, 6rem); }
.products { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.product { background: var(--tint, white); border: 1px solid #efdfd2; border-radius: 1.25rem; overflow: hidden; }
.product--orange { --tint: #ffecda; }
.product--black { --tint: #f4e5ef; }
.product--yellow { --tint: #fff3ca; }
.product--blue { --tint: #e2f4ff; }
.product--pink { --tint: #ffe7ee; }
.product img { display: block; width: 100%; height: auto; }
.product-copy { padding: .9rem 1rem 1.15rem; color: var(--berry); }
.product p { margin: 0; color: #584942; font-size: .89rem; }
.contact { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.1rem; border-top: 1px solid #e9d9cf; border-bottom: 1px solid #e9d9cf; padding-block: clamp(1.8rem, 5vw, 3rem); }
.contact h2 { font-size: clamp(1.8rem, 4vw, 2.9rem); }
.email { font-weight: 650; overflow-wrap: anywhere; }
.footer { font-size: .9rem; color: #584942; }
@media (max-width: 900px) {
  .products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .shell { width: calc(100% - 1.5rem); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
  .hero { border-radius: 1rem; }
  .product-copy { padding: .65rem .7rem .8rem; }
}