/* Grumpy Gremlin Coffee Co.
   Look: a morale patch on a field jacket. Olive ripstop, coyote-tan canvas,
   brass thread. Stitched (dashed) borders mark things you can pick up: products and buttons. */

:root {
  --ripstop: #2f3725;   /* olive drab, main dark */
  --shade:   #1c2116;   /* deep olive, header and footer */
  --canvas:  #d8c79e;   /* coyote tan, light bands and patches */
  --loop:    #b9a677;   /* velcro loop panel */
  --thread:  #f3ebd6;   /* bone, text on dark */
  --roast:   #2a1b11;   /* dark roast brown, text on tan */
  --brass:   #e3aa30;   /* buttons, prices */
  --gremlin: #a6d85f;   /* focus rings and small signals only */

  --display: "Big Shoulders Stencil", "Big Shoulders Stencil Display", "Big Shoulders Stencil Text",
             "Saira Stencil One", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: max(1.25rem, env(safe-area-inset-left), env(safe-area-inset-right));
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--thread);
  background: var(--shade);
  overflow-wrap: break-word;
}

@media (min-width: 48em) { body { font-size: 1.125rem; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

:focus-visible {
  outline: 3px solid var(--gremlin);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  background: var(--brass);
  color: var(--roast);
  padding: .75rem 1rem;
  font-weight: 700;
  border-radius: 4px;
}
.skip:focus { top: 1rem; }

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- type ---------- */

.display, h1, h2 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .92;
  letter-spacing: .01em;
  margin: 0 0 .45em;
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 12.5vw, 7.25rem); }
h2 { font-size: clamp(2.25rem, 7.5vw, 4.25rem); }
h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 .4em;
}
.page-title { font-size: clamp(2.75rem, 10vw, 5.5rem); }

.mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .6rem;
}

.lede { font-size: 1.15em; max-width: 34rem; }
.prose { max-width: 36rem; }
.prose > :last-child { margin-bottom: 0; }

/* ---------- bands ---------- */

.band { padding-block: clamp(3.25rem, 9vw, 7rem); }

.band--ripstop {
  background-color: var(--ripstop);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.09) 0 1px, transparent 1px 7px);
}
.band--shade { background: var(--shade); }
.band--canvas {
  background-color: var(--canvas);
  background-image:
    repeating-linear-gradient(45deg, rgba(42,27,17,.035) 0 2px, transparent 2px 5px);
  color: var(--roast);
}
.band--canvas .mark { color: #5b6b2c; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--shade);
  border-bottom: 2px dashed rgba(243,235,214,.22);
  padding-top: env(safe-area-inset-top);
}
.site-header .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: .75rem;
  min-height: 4.25rem;
}

.brand {
  display: flex;
  flex-direction: column;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.05rem, 4.6vw, 1.55rem);
  line-height: .88;
  letter-spacing: .03em;
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
  padding-block: .5rem;
}
.brand span { font-size: .6em; letter-spacing: .26em; color: var(--brass); margin-top: .2em; }

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a, .cart {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .8rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
}
.nav a:hover, .cart:hover { background: rgba(243,235,214,.1); }
.nav a[aria-current="page"] { color: var(--brass); }

.header-actions { display: flex; align-items: center; gap: .5rem; }
.cart { border: 2px solid rgba(243,235,214,.4); }

.menu-btn {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: .4rem .9rem;
  font: 600 1rem var(--body);
  color: var(--roast);
  background: var(--brass);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

@media (max-width: 57.99em) {
  .nav { grid-column: 1 / -1; grid-row: 2; padding-bottom: .5rem; }
  .js .nav { display: none; }
  .js .nav.is-open { display: block; }
  .js .nav ul { flex-direction: column; gap: 0; }
  .js .nav a {
    display: flex;
    min-height: 3.25rem;
    font-size: 1.15rem;
    border-top: 1px dashed rgba(243,235,214,.2);
    border-radius: 0;
  }
  .js .menu-btn { display: inline-flex; }
}
@media (min-width: 58em) {
  .site-header .wrap { grid-template-columns: auto minmax(0, 1fr) auto; }
  .nav ul { justify-content: flex-end; }
}

/* ---------- buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: .55rem 1.6rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--roast);
  background: var(--brass);
  border-radius: 6px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1.5px dashed rgba(42,27,17,.55);
  border-radius: 3px;
  pointer-events: none;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 rgba(0,0,0,.4); }
.btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.4); }

.btn--plain { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn--plain::after { border-color: currentColor; opacity: .45; }
.btn--plain:hover { box-shadow: inset 0 0 0 2px currentColor; }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 6rem); overflow: hidden; }
.hero .wrap { display: grid; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.hero__tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.15rem, 4.4vw, 1.9rem);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 .35rem;
}
.hero h1 { margin-bottom: .3em; }

.velcro {
  background-color: var(--loop);
  background-image:
    radial-gradient(rgba(0,0,0,.2) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,.2) 1px, transparent 1.5px);
  background-size: 5px 5px;
  background-position: 0 0, 2.5px 2.5px;
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.25), 0 16px 30px -14px rgba(0,0,0,.7);
}
.hero__patch {
  width: min(100%, 15rem);
  margin-inline: auto;
  padding: 1.1rem;
  border-radius: 14px;
}
.hero__patch img {
  width: 100%;
  transform: rotate(-4deg);
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.45));
}
@media (min-width: 56em) {
  .hero .wrap { grid-template-columns: 1.15fr .85fr; }
  .hero__patch { order: 2; width: min(100%, 30rem); padding: clamp(1.5rem, 3vw, 2.75rem); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__patch img { animation: slap .5s cubic-bezier(.2, 1.4, .4, 1) .15s both; }
  @keyframes slap {
    from { opacity: 0; transform: rotate(-14deg) scale(1.3); }
    to   { opacity: 1; transform: rotate(-4deg) scale(1); }
  }
}

/* ---------- tabs (what we stand for) ---------- */
.strip { padding-block: 1.25rem; background: var(--shade); }

/* ---------- product patches ---------- */

.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.patch-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.5rem, 34%) 1fr;
  gap: 1rem;
  align-items: center;
  height: 100%;
  padding: 1.25rem;
  background: var(--canvas);
  color: var(--roast);
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(0,0,0,.4), 0 16px 26px -14px rgba(0,0,0,.7);
  transition: transform .16s ease;
}
.patch-card::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(42,27,17,.4);
  border-radius: 7px;
  pointer-events: none;
}
.patch-card:hover, .patch-card:focus-within { transform: rotate(-1deg) translateY(-3px); }
.patch-card__media { aspect-ratio: 4 / 5; }
.patch-card__media img { width: 100%; height: 100%; object-fit: contain; }
.patch-card h3 a { text-decoration: none; }
.patch-card h3 a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 12px; }
.patch-card p { margin-bottom: .6em; line-height: 1.45; }
.patch-card .go {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 3px solid var(--roast);
}
.label { font-weight: 600; font-size: .95rem; margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; }
.price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  margin: 0 0 .6rem;
}

/* roast level: light, medium, espresso is a real sequence */
.meter { display: inline-flex; gap: 3px; }
.meter i { width: .5rem; height: .85rem; border-radius: 50%; border: 2px solid currentColor; }
.meter i.on { background: currentColor; }

@media (min-width: 40em) {
  .patch-card { grid-template-columns: 1fr; align-items: start; padding: 1.75rem 1.6rem 1.6rem; }
}

/* ---------- split rows ---------- */

.split { display: grid; gap: clamp(1.5rem, 5vw, 4.5rem); align-items: center; }
.split__media img { width: 100%; border-radius: 10px; }
@media (min-width: 54em) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--flip .split__media { order: 2; }
}

/* ---------- review ---------- */

.review { max-width: 48rem; margin: 0; }
.review blockquote {
  margin: 0 0 1rem;
  font-size: clamp(1.35rem, 3.6vw, 2.1rem);
  line-height: 1.3;
  font-weight: 500;
}
.stars { color: var(--brass); font-size: 1.5rem; letter-spacing: .15em; margin: 0 0 .75rem; }
.review figcaption { font-weight: 600; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 54em) { .faq { grid-template-columns: .85fr 1.15fr; align-items: start; } }
.faq__mascot {
  width: 9.5rem;
  height: 9.5rem;
  padding: .8rem;
  border-radius: 50%;
  margin-bottom: 1.25rem;
}
.faq__mascot img { width: 100%; height: 100%; object-fit: contain; }
.faq__reach { margin-top: 1.5rem; }
.faq__reach a { font-weight: 700; font-size: 1.1rem; word-break: break-all; }

details { border-top: 2px dashed rgba(243,235,214,.28); }
details:last-of-type { border-bottom: 2px dashed rgba(243,235,214,.28); }
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: .9rem 0;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+";
  flex: none;
  font-family: var(--display);
  font-size: 2rem;
  line-height: 1;
  color: var(--brass);
  transition: transform .15s ease;
}
details[open] summary::after { transform: rotate(45deg); }
details p { margin: 0 0 1.1rem; max-width: 36rem; }

/* ---------- shop rows ---------- */

.roast-row {
  display: grid;
  gap: 1.5rem;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  border-top: 2px dashed rgba(42,27,17,.35);
}
.roast-row:first-of-type { border-top: 0; padding-top: 0; }
.roast-row__media { max-width: 16rem; margin-inline: auto; }
.roast-row h2 { font-size: clamp(2rem, 6vw, 3.25rem); }
@media (min-width: 48em) {
  .roast-row { grid-template-columns: minmax(14rem, 22rem) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .roast-row__media { max-width: none; margin: 0; position: sticky; top: 6rem; }
}
.specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 2px dashed rgba(42,27,17,.4);
  border-radius: 8px;
  max-width: 36rem;
}
.specs dt { font-weight: 700; }
.specs dd { margin: 0; }
.rating { font-weight: 600; margin-bottom: .75rem; }
.rating .stars { font-size: 1.1rem; display: inline; color: #8a5a00; }

.features { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: .6rem; max-width: 40rem; }
.features li { padding-left: 1.5rem; position: relative; }
.features li::before { content: "★"; position: absolute; left: 0; color: var(--brass); }

/* ---------- contact ---------- */

.big-link {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.45rem, 5.6vw, 3.25rem);
  line-height: 1.05;
  color: var(--brass);
  word-break: break-all;
  margin-bottom: 1.5rem;
}

/* ---------- legal ---------- */

.legal { max-width: 44rem; }
.legal h2 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.25;
  text-transform: none;
  letter-spacing: 0;
  margin: 2.25rem 0 .6rem;
}
.legal li { margin-bottom: .25em; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--shade);
  border-top: 2px dashed rgba(243,235,214,.22);
  padding-block: 3rem calc(2rem + env(safe-area-inset-bottom));
  font-size: 1rem;
}
.site-footer .cols { display: grid; gap: 2rem; }
@media (min-width: 40em) { .site-footer .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { .site-footer .cols { grid-template-columns: 1.4fr .7fr .8fr 1.2fr; } }
.site-footer h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brass);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li a { display: inline-flex; align-items: center; min-height: 2.5rem; text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.site-footer .brand { font-size: 1.9rem; margin-bottom: .75rem; }
.site-footer .fine {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(243,235,214,.22);
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  justify-content: space-between;
  opacity: .85;
}
.site-footer .fine p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .btn-row { display: none; }
  body, .band { background: #fff !important; color: #000 !important; }
}

/* visually hidden, still read by screen readers */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =====================================================================
   Gremlin pass: bigger patch, claw marks, spilled beans, eared badges,
   products always three across.
   ===================================================================== */

/* ---------- bigger logo ---------- */
.hero { position: relative; padding-bottom: clamp(5.5rem, 15vw, 11rem); }
.hero .wrap { position: relative; z-index: 2; }
.hero__patch { width: min(100%, 26rem); padding: clamp(.9rem, 4vw, 1.5rem); }
.hero__patch img { transform: rotate(-5deg) scale(1.06); }
@media (min-width: 56em) {
  .hero .wrap { grid-template-columns: 1fr 1fr; }
  .hero__patch { width: min(100%, 40rem); padding: clamp(1.25rem, 2.5vw, 2.25rem); }
  .hero h1 { font-size: clamp(3.5rem, 7.6vw, 7rem); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes slap {
    from { opacity: 0; transform: rotate(-16deg) scale(1.4); }
    to   { opacity: 1; transform: rotate(-5deg) scale(1.06); }
  }
}

/* ---------- claw marks ---------- */
.claw {
  position: absolute;
  z-index: 1;
  aspect-ratio: 220 / 250;
  background: currentColor;
  -webkit-mask: url(/assets/claw.svg) center / contain no-repeat;
          mask: url(/assets/claw.svg) center / contain no-repeat;
  pointer-events: none;
}
.clawed { position: relative; overflow: hidden; }
.clawed > .wrap { position: relative; z-index: 2; }
.claw--hero  { color: #0d1009; opacity: .7;  width: clamp(11rem, 44vw, 30rem); top: 2%;  right: -3%; transform: rotate(10deg); }
.claw--left  { color: #0d1009; opacity: .55; width: clamp(8rem, 26vw, 17rem);  top: -1.5rem; left: -1.5rem; transform: rotate(-18deg) scaleX(-1); }
.claw--right { color: var(--brass); opacity: .16; width: clamp(9rem, 30vw, 20rem); top: 1rem; right: -1rem; transform: rotate(14deg); }

/* ---------- spilled beans ---------- */
.beans {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: 0;
  width: 100%;
  height: clamp(4.25rem, 12vw, 9.5rem);
  pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.4));
}
.spilled { position: relative; padding-bottom: clamp(6rem, 16vw, 12rem); }
.spilled > .wrap { position: relative; z-index: 2; }

/* ---------- badges with ears ---------- */
.strip {
  position: relative;
  z-index: 3;
  padding-block: 1.9rem 1.5rem;
}
.strip::before, .strip::after {          /* chewed (pinked) fabric edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background:
    linear-gradient(-45deg, var(--shade) 7px, transparent 0) 0 0 / 14px 10px repeat-x,
    linear-gradient(45deg, var(--shade) 7px, transparent 0) 0 0 / 14px 10px repeat-x;
}
.strip::before { top: -9px; transform: scaleY(-1); }
.strip::after  { bottom: -9px; transform: none;
  background:
    linear-gradient(-135deg, var(--shade) 7px, transparent 0) 0 0 / 14px 10px repeat-x,
    linear-gradient(135deg, var(--shade) 7px, transparent 0) 0 0 / 14px 10px repeat-x; }

/* ---------- products: always one row of three ---------- */
.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.5rem, 2.2vw, 1.5rem);
}
.patch-card {
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  gap: .6rem;
  padding: clamp(.7rem, 2.6vw, 1.75rem);
}
.patch-card::after { inset: clamp(4px, 1vw, 7px); }
@media (max-width: 39.99em) {
  .patch-card { border-radius: 9px; text-align: center; }
  .patch-card h3 { font-size: .9rem; line-height: 1.15; margin-bottom: .3em; }
  .patch-card p:not(.price):not(.label) { display: none; }      /* tasting note lives on the Coffee page */
  .patch-card .label { flex-direction: column; gap: .2rem; font-size: .72rem; line-height: 1.15; }
  .patch-card .price { font-size: 1.25rem; margin-bottom: .35rem; }
  .patch-card .go { font-size: .82rem; letter-spacing: .03em; border-bottom-width: 2px; }
}

/* phone: claw sits beside the headline instead of hiding behind the patch */
@media (max-width: 55.99em) {
  .claw--hero { top: auto; bottom: 9%; right: -9%; width: clamp(12rem, 58vw, 22rem); transform: rotate(16deg); }
  .beans { height: clamp(5rem, 16vw, 9.5rem); }
}
@media (max-width: 39.99em) {
  .patch-card .go { font-size: .74rem; white-space: nowrap; }
}

/* keep the "view" links on one baseline across the row */
.patch-card { grid-template-rows: auto 1fr; }
.patch-card > div:last-child { display: flex; flex-direction: column; height: 100%; }
.patch-card .go { margin-top: auto; align-self: flex-start; }
@media (max-width: 39.99em) {
  .patch-card .go, .patch-card .label { align-self: center; }
}

/* ---------- shorter product cards ---------- */
.patch-card { gap: .45rem; padding: clamp(.6rem, 2vw, 1.25rem); }
.patch-card__media { aspect-ratio: 1 / 1; }
.patch-card h3 { margin-bottom: .25em; }
.patch-card p { margin-bottom: .4em; }
.patch-card .price { margin-bottom: .45rem; }
@media (min-width: 40em) {
  .patch-card__media { aspect-ratio: 5 / 4; }
  .patch-card .price { font-size: 1.5rem; }
}
@media (max-width: 39.99em) {
  .patch-card .label { flex-direction: row; justify-content: center; gap: .3rem; font-size: .68rem; }
  .patch-card .label .meter i { width: .4rem; height: .68rem; }
}

/* ---------- badges: all green, teeth instead of ears ---------- */

/* ---------- callout badges: two gremlin teeth, gremlin peeking round each ---------- */
.tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.7rem 2.2rem;
  list-style: none;
  margin: 0;
  padding: 2rem 0 1.4rem;
}
.tags--left { justify-content: flex-start; padding-left: 1.5rem; }
.tags li { position: relative; transform: rotate(-2.2deg); }
.tags li:nth-child(even) { transform: rotate(1.8deg); }

.badge {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #162008;
  background: var(--gremlin);
  border-radius: 11px;
  padding: .55rem 1.15rem .45rem;
  outline: 1.5px dashed rgba(22,32,8,.55);
  outline-offset: -5px;
  box-shadow: 0 3px 0 #0a0d06;
}

.peek {                                    /* mascot tucked behind the badge */
  position: absolute;
  z-index: 0;
  width: 3.6rem;
  height: auto;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.tags li:nth-child(1) .peek { right: -.9rem; bottom: 42%; transform: rotate(14deg); }                 /* over the top right */
.tags li:nth-child(2) .peek { left: 22%; top: 48%; transform: rotate(180deg); }                       /* hanging off the bottom */
.tags li:nth-child(3) .peek { left: -.8rem; bottom: 40%; transform: rotate(-16deg) scaleX(-1); }      /* over the top left */
.tags li:nth-child(4) .peek { right: -2.1rem; top: -18%; transform: rotate(62deg); }                  /* round the right side */
.tags li:nth-child(5) .peek { left: -2.1rem; top: -12%; transform: rotate(-64deg) scaleX(-1); }       /* round the left side */

@media (max-width: 34em) {
  .tags { gap: 2.3rem 1.4rem; padding: 1.7rem 0 1.2rem; }
  .badge { font-size: .98rem; letter-spacing: .06em; padding: .45rem .85rem .35rem; }
  .peek { width: 3.1rem; }
}
.tags li:nth-child(5) .peek { left: auto; right: 16%; top: auto; bottom: 44%; transform: rotate(-9deg); }   /* over the top, off-centre */

.peek { width: 5rem; }
@media (max-width: 34em) {
  .peek { width: 4.2rem; }
}

/* ---------- the original pen sketch, taped to the page ---------- */
.sketch {
  position: relative;
  width: min(100%, 18rem);
  margin: .5rem 0 2rem .35rem;
  padding: .35rem;
  background: #fdfdf8;
  box-shadow: 0 12px 20px -8px rgba(0,0,0,.75);
  transform: rotate(-3deg);
}
.sketch img { width: 100%; }
.sketch::before {                          /* strip of tape */
  content: "";
  position: absolute;
  top: -.75rem;
  left: 50%;
  width: 5.5rem;
  height: 1.6rem;
  transform: translateX(-50%) rotate(2.5deg);
  background: rgba(227,170,48,.8);
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ---------- mascot colours: olive fur for the badges, paw-pad orange for buying ---------- */
:root {
  --fur: #8a9c3a;        /* his fur, lifted a touch so dark lettering reads on it */
  --pad: #d47a2c;        /* nose and paw pads */
  --pad-deep: #9a4812;   /* same orange, dark enough to read on tan */
}
.badge { background: var(--fur); color: #12180a; }
.btn:not(.btn--plain) { background: var(--pad); }
.menu-btn { background: var(--pad); }
.price { color: var(--pad-deep); }
.band--ripstop > .wrap > .price, .band--shade .price { color: var(--pad); }
.patch-card .go { border-bottom-color: var(--pad-deep); }

/* ---------- product cards: squat, not tall ---------- */
@media (max-width: 39.99em) {                 /* phone: three compact tiles */
  .patch-card { padding: .55rem .5rem .6rem; gap: .3rem; }
  .patch-card__media { aspect-ratio: 5 / 4; }
  .patch-card .label { margin-bottom: .15rem; }
  .patch-card .label__t { display: none; }    /* the roast dots stay; the words are on the Coffee page */
  .patch-card h3 { font-size: .84rem; }
  .patch-card .price { margin-bottom: .25rem; }
}
@media (min-width: 40em) and (max-width: 61.99em) {   /* tablet: short photo on top */
  .patch-card__media { aspect-ratio: 3 / 2; }
}
@media (min-width: 62em) {                    /* desktop: photo beside the text */
  .patch-card {
    grid-template-columns: 36% 1fr;
    grid-template-rows: auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.2rem 1.3rem;
  }
  .patch-card__media { aspect-ratio: 4 / 5; }
  .patch-card > div:last-child { height: auto; }
  .patch-card .go { margin-top: .2rem; }
}

/* ---------- logo in the top bar (every page except home, where the big patch is on show) ---------- */
.brand { flex-direction: row; align-items: center; gap: .55rem; min-width: 0; }
.brand__text { display: flex; flex-direction: column; font-weight: inherit; min-width: 0; }
.brand__logo {
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  object-fit: contain;
  transform: rotate(-5deg);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.site-footer .brand { flex-direction: column; align-items: flex-start; gap: 0; }
@media (max-width: 30em) {
  .brand__logo { width: 2.6rem; height: 2.6rem; }
  .brand:has(.brand__logo) { font-size: clamp(.88rem, 3.9vw, 1.2rem); gap: .4rem; }
  .header-actions { gap: .35rem; }
  .cart, .menu-btn { padding-inline: .65rem; }
}