/* ===============================================================
   crooh classe
   paper + ink + found objects. times new roman, lowercase.
   =============================================================== */

:root {
  color-scheme: light;

  /* palette — sampled from the brand assets, not invented */
  --paper:      #EEE9D5;   /* the collage ground */
  --kraft:      #E2D6C0;   /* logo lockup cream — raised surfaces */
  --kraft-deep: #D7C8A9;   /* pressed / hover */
  --ink:        #000000;
  --ink-soft:   #3A352A;
  --ink-faint:  #7C7361;
  --flare:      #D42A12;   /* off the komorebi cover */
  --rule:       rgba(0, 0, 0, .18);
  --rule-soft:  rgba(0, 0, 0, .10);

  --font: "Times New Roman", Times, "Liberation Serif", serif;

  /* type scale — perfect fourth off an 18px base */
  --t-xs:   .8125rem;
  --t-sm:   .9375rem;
  --t-base: 1.125rem;
  --t-md:   1.4375rem;
  --t-lg:   clamp(1.9rem, 3.4vw, 2.8rem);
  --t-xl:   clamp(2.6rem, 6vw, 5rem);
  --t-hero: clamp(2.8rem, 7.5vw, 6.6rem);

  --gut: clamp(1.25rem, 4.5vw, 5rem);
  --stack: clamp(4.5rem, 11vw, 9.5rem);

  --shadow-obj: 6px 10px 16px rgba(72, 58, 30, .26);
  --shadow-art: 10px 12px 18px rgba(72, 58, 30, .30);
}

/* --- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-base);
  font-weight: 400;
  line-height: 1.42;
  text-transform: lowercase;     /* the whole site speaks in lowercase */
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: lowercase; }
h1, h2, h3, p, figure, ul, dl { margin: 0; padding: 0; }
ul { list-style: none; }

:focus-visible { outline: 3px solid var(--flare); outline-offset: 3px; }

/* --- type ----------------------------------------------------- */
.display {
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: .96;
  letter-spacing: -.025em;
}
.note {
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--ink-faint);
}
.lede {
  font-size: .82rem;               /* matches the product-sheet description */
  font-weight: 400;
  line-height: 1.4;
  max-width: 46ch;
}

/* --- shell ---------------------------------------------------- */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
.band { padding-block: var(--stack); position: relative; }
.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.25rem; z-index: 999;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- nav ------------------------------------------------------ */
.nav { position: sticky; top: 0; z-index: 60; background: var(--paper); border-bottom: 1px solid var(--rule); }
.nav__in { display: flex; align-items: center; gap: 1.5rem; height: 74px; }
.nav__mark img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; font-size: var(--t-base); }
.nav__links a { padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav__links a:hover,
.nav__links a[aria-current="page"] { border-bottom-color: var(--ink); }
.nav__toggle { display: none; }

/* --- hero: the object field ----------------------------------- */
.hero {
  position: relative;
  min-height: clamp(560px, 88vh, 940px);
  display: grid; place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.hero__field { position: absolute; inset: 0; pointer-events: none; }

/* outer holds position + cursor parallax, inner holds tilt + entrance,
   so the two transforms never fight each other */
.obj {
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--w);
  transform: translate(-50%, -50%) translate(var(--px, 0), var(--py, 0));
  will-change: transform;
}
.obj img { width: 100%; filter: drop-shadow(var(--shadow-obj)); opacity: 0; }

.hero__mid { position: relative; z-index: 3; text-align: center; padding-inline: 1rem; }
.hero__mark { width: min(62vw, 520px); margin-inline: auto; filter: drop-shadow(4px 7px 0 rgba(0, 0, 0, .10)); }
.hero__say {
  margin-top: 1.25rem;
  font-size: .95rem; font-weight: 400; font-style: italic;
  letter-spacing: 0; line-height: 1.45;
  color: #6B6352;
  max-width: 30ch; margin-inline: auto;
}
.hero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.5rem;
  background: var(--ink); color: var(--paper);
  padding: .6rem 1.8rem; font-size: var(--t-sm); line-height: 1;
  border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background .15s, color .15s;
}
.hero__cta:hover { background: transparent; color: var(--ink); }

/* one orchestrated moment: objects settle onto the table */
@keyframes settle {
  from { opacity: 0; transform: translateY(-26px) rotate(var(--r, 0deg)) scale(.94); }
  to   { opacity: 1; transform: translateY(0)     rotate(var(--r, 0deg)) scale(1); }
}
.hero__field .obj img {
  animation: settle .7s cubic-bezier(.2, .8, .3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* --- section heads -------------------------------------------- */
.head { display: flex; align-items: baseline; gap: 1.25rem; margin-bottom: 2.25rem; }
.head h1, .head h2 { flex: none; }
.head__rule { flex: 1; height: 1px; background: var(--rule); }
.head .note { flex: none; }

/* --- rail ----------------------------------------------------- */
.rail {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--rule); }
.rail__item { flex: 0 0 clamp(290px, 42vw, 500px); scroll-snap-align: start; }

/* --- product sheet -------------------------------------------- */
/* Modelled on the pack-sleeve mockup: everything hugs the artwork.
   Several children are inline elements (<a>, <span>), so each needs an
   explicit display or the grid placement silently collapses. */
.sheet {
  display: grid; position: relative;
  /* art capped small so the type around it reads at a comfortable scale;
     fixed columns keep every card's art in the same spot across a row */
  grid-template-columns: minmax(0, 11rem) min(56%, 300px);
  justify-content: center;
  align-content: start;
  column-gap: .6rem;               /* same gap the blurb keeps under the art */
}

/* left column — the sound counts, hugging the artwork's left edge */
.sheet__spec {
  display: block;
  grid-column: 1; grid-row: 2;
  align-self: start; justify-self: end;
}
.sheet__inc-label,
.sheet__inc span {
  display: block;
  font-size: .78rem; font-weight: 400;
  line-height: 1.28; letter-spacing: 0;
  color: var(--ink-soft);
}
.sheet__inc { display: block; }
.sheet__total {
  display: block; margin-top: .4rem;
  font-size: .72rem; font-style: italic; color: var(--ink-faint);
}

/* right column — name sits flush on the art, copy sits flush under it */
.sheet__foot { display: block; grid-column: 2; grid-row: 3; }
.sheet__head {
  display: flex; align-items: flex-end; gap: .75rem;
  grid-column: 2; grid-row: 1;
  margin-bottom: .15rem;          /* the name hugs the artwork */
}
.sheet__name {
  display: block; flex: 1 1 auto;
  font-size: 1.05rem; font-weight: 400;
  line-height: 1.15; letter-spacing: 0;
  color: var(--ink-soft);
}
.sheet__kind {
  display: block; flex: none;
  font-size: .72rem; font-weight: 400;
  color: var(--ink-faint);
}

.sheet__art {
  display: block; position: relative;
  grid-column: 2; grid-row: 2;
  background: var(--kraft);
  aspect-ratio: 1; overflow: hidden;
  box-shadow: var(--shadow-art);
}
.sheet__art img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.sheet:hover .sheet__art img { transform: scale(1.02); }
.sheet__tag {
  position: absolute; top: 0; left: 0;
  background: var(--flare); color: var(--paper);
  font-size: .68rem; padding: .2rem .5rem;
}

.sheet__blurb {
  display: block; margin-top: .6rem;
  font-size: .82rem; font-weight: 400;
  line-height: 1.4; color: var(--ink-soft);
}
.sheet__buy { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; margin-top: .7rem; }
.sheet__price {
  margin-left: auto; font-size: .85rem;
  color: var(--flare); font-variant-numeric: tabular-nums;
}

/* audio previews — two per pack, placeholders until files are added */
.sheet__previews { display: grid; gap: .35rem; margin-top: .7rem; }
.sheet__preview {
  display: grid; grid-template-columns: auto auto minmax(1.5rem, 1fr) auto auto;
  align-items: center; gap: .5rem;
  padding: .35rem .6rem .35rem .4rem;
  background: var(--kraft); border: 1px solid var(--rule);
}
.sheet__play {
  position: relative; flex: none; width: 1.5rem; height: 1.5rem;
  border: 1.5px solid var(--ink); border-radius: 50%;
  transition: background .15s;
}
.sheet__play::before {
  content: ""; position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid; border-width: .3rem 0 .3rem .48rem;
  border-color: transparent transparent transparent var(--ink);
}
/* pause: two bars, drawn from the same pseudo-element */
.sheet__preview.is-playing .sheet__play::before {
  left: 50%; width: .42rem; height: .56rem;
  border-width: 0 .14rem; border-color: var(--ink);
}
.sheet__play:not(:disabled):hover { background: var(--ink); }
.sheet__play:not(:disabled):hover::before { border-left-color: var(--paper); }
.sheet__preview.is-playing .sheet__play:hover::before { border-color: var(--paper); }
.sheet__play:disabled { opacity: .4; cursor: default; }
.sheet__preview-label { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.sheet__preview-bar { position: relative; height: 1px; background: var(--rule); }
.sheet__preview[data-src] .sheet__preview-bar { cursor: pointer; }
.sheet__preview[data-src] .sheet__preview-bar::before { content: ""; position: absolute; inset: -9px 0; }  /* bigger click target */
.sheet__preview-fill { position: absolute; left: 0; top: -.5px; height: 2px; width: 0; background: var(--ink); }
.sheet__preview-time {
  font-size: .68rem; font-style: italic; color: var(--ink-soft);
  white-space: nowrap; font-variant-numeric: tabular-nums;
  /* room for "0:30 / 0:30" from the start, so pressing play never widens the box */
  min-width: 4.6em; text-align: right;
}

/* volume — one level per preview; the speaker keeps it from reading as a second progress line */
.sheet__vol { display: flex; align-items: center; gap: .25rem; color: var(--ink-soft); }
.sheet__vol-icon { width: .8rem; height: .8rem; flex: none; }
.sheet__volume {
  -webkit-appearance: none; appearance: none;
  width: 3.2rem; height: 14px; margin: 0;
  background: transparent; cursor: pointer;
}
.sheet__volume::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--ink) var(--vol, 80%), var(--rule) var(--vol, 80%));
}
.sheet__volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; margin-top: -4px;
  border: 0; border-radius: 50%; background: var(--ink);
}
.sheet__volume::-moz-range-track { height: 2px; background: var(--rule); }
.sheet__volume::-moz-range-progress { height: 2px; background: var(--ink); }
.sheet__volume::-moz-range-thumb { width: 10px; height: 10px; border: 0; border-radius: 50%; background: var(--ink); }
.sheet__volume:disabled { cursor: default; }
.sheet__preview.is-empty .sheet__vol { opacity: .4; }
.no-volume .sheet__vol { display: none; }
/* narrow cards (two to a row on smaller laptops, the padded sale card): compact rows */
.sheet__previews { container-type: inline-size; }
/* two cards to a row on tablets and small laptops: the name, copy, previews and
   buttons run the full card width (as on phones) so the preview rows always fit */
@media (max-width: 1000px) {
  .sheet__head, .sheet__foot { grid-column: 1 / -1; }
  /* the sale card fills its (narrow) slot here; the includes column still hugs its text */
  .sheet.sheet--halloween { width: auto; justify-self: stretch; grid-template-columns: max-content minmax(0, 1fr); }
}
@container (max-width: 275px) {
  .sheet .sheet__previews .sheet__preview { gap: .4rem; padding-right: .45rem; }
  .sheet .sheet__previews .sheet__vol-icon { display: none; }
  .sheet .sheet__previews .sheet__volume { width: 2.1rem; }
}

/* --- featured ------------------------------------------------- */
.feat { background: var(--kraft); border-block: 1px solid var(--rule); }
.feat__in { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.feat__shot { border: 1px solid var(--ink); box-shadow: var(--shadow-art); }
.feat__price { display: flex; align-items: baseline; gap: .7rem; margin-top: 1.25rem; font-size: 1.3rem; color: var(--flare); font-variant-numeric: tabular-nums; }
.feat__was { font-size: 1rem; color: var(--ink-faint); text-decoration: line-through; }
.feat__inc { margin-top: 1rem; }
.feat__inc li { font-size: .82rem; font-weight: 400; line-height: 1.34; color: var(--ink-soft); }
/* the featured blurb runs a touch larger than a sheet description */
#feat-blurb { font-size: .92rem; max-width: 42ch; }

/* pill buttons — black border, transparent, fill on hover */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  font-size: .82rem; font-weight: 400; line-height: 1;
  padding: .5rem 1.2rem;
  transition: background .15s, color .15s;
}
.pill:hover { background: var(--ink); color: var(--paper); }
/* add to cart on the cards: filled, and an outline once the pack is in the cart */
.pill--cart { background: var(--ink); color: var(--paper); }
.pill--cart:hover, .pill--cart.is-in-cart { background: transparent; color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.5rem;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: transparent; color: var(--ink);
  padding: .7rem 1.8rem; font-size: var(--t-sm); line-height: 1;
  transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
/* solid variant: filled black, outline on hover */
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: transparent; color: var(--ink); }

/* --- category rows -------------------------------------------- */
.cats { display: grid; gap: 0; }
.cat {
  display: grid; align-items: center; gap: 1.5rem;
  grid-template-columns: auto 1fr auto;
  padding-block: 1.6rem; border-top: 1px solid var(--rule);
  transition: padding-left .25s cubic-bezier(.2, .7, .3, 1);
}
.cat:last-child { border-bottom: 1px solid var(--rule); }
.cat:hover { padding-left: 1rem; }
.cat__name { font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.cat__count { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-style: italic; }
.cat__peek { display: flex; gap: .5rem; }
.cat__peek img { width: 54px; height: 54px; object-fit: cover; border: 1px solid var(--rule); }



/* --- capture -------------------------------------------------- */
.cap { background: var(--kraft); border-block: 1px solid var(--rule); }
.cap__form { display: flex; gap: .75rem; margin-top: 1.75rem; max-width: 460px; flex-wrap: wrap; }
.cap__form input, .cap__form textarea {
  flex: 1 1 220px; min-width: 0;
  background: var(--paper); border: 2px solid var(--ink);
  padding: .8rem 1rem; font: inherit; color: var(--ink);
  text-transform: none;                 /* people type their own name and email */
}
.cap__form input::placeholder, .cap__form textarea::placeholder { color: var(--ink-faint); font-style: italic; }
/* stacked (column) form: the 220px flex-basis would become height, so inputs size to their text */
.cap__form--stack input { flex: none; }
.cap__form button {
  background: transparent; color: var(--ink);
  padding: .65rem 1.6rem; font-size: var(--t-sm); line-height: 1;
  border: 1.5px solid var(--ink); border-radius: 999px;
  transition: background .15s, color .15s;
}
.cap__form button:hover { background: var(--ink); color: var(--paper); }

/* --- shop ----------------------------------------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 3rem; }
.chip { border: 2px solid var(--ink); padding: .4rem 1rem; font-size: var(--t-base); transition: background .15s, color .15s; }
.chip:hover { background: var(--kraft-deep); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.grid { display: grid; gap: clamp(2.5rem, 4.5vw, 4rem) clamp(2rem, 3.5vw, 3.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --- about ---------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }

/* --- contact -------------------------------------------------- */
.contact__list { border-top: 1px solid var(--rule); margin-top: 2rem; }
.contact__email {
  display: inline-block; margin-top: 1.75rem;
  font-size: clamp(1.35rem, 4.6vw, 2.2rem); font-weight: 700; letter-spacing: -.02em;
  text-transform: none; border-bottom: 2px solid var(--ink); overflow-wrap: anywhere;
  transition: color .15s, border-color .15s;
}
.contact__email:hover { color: var(--flare); border-color: var(--flare); }
.contact__row { display: flex; align-items: center; gap: 1rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); transition: padding-left .25s cubic-bezier(.2, .7, .3, 1); }
.contact__row:hover { padding-left: .75rem; }
.contact__row strong { font-size: var(--t-md); font-weight: 700; letter-spacing: -.02em; }
.contact__row span { margin-left: auto; color: var(--ink-faint); font-style: italic; text-transform: none; }

/* --- footer --------------------------------------------------- */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.foot__in { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .6fr)); }
.foot__mark { width: 190px; }
.foot h3 { font-size: var(--t-base); font-weight: 700; margin-bottom: 1rem; color: var(--paper); }
.foot li { margin-bottom: .5rem; }
.foot a { color: rgba(238, 233, 213, .74); }
.foot a:hover { color: var(--flare); }
.foot__base {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin-top: 3.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(238, 233, 213, .2);
  font-size: var(--t-sm); font-style: italic; color: rgba(238, 233, 213, .55);
}
.foot__base span:last-child { margin-left: auto; }

/* --- product page --------------------------------------------- */
/* one page per pack (tools/build_pages.py): artwork left, details right */
.product__back {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  font-size: var(--t-sm); color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.product__back:hover { color: var(--ink); border-bottom-color: var(--ink); }
.product {
  display: grid; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.product__art {
  background: var(--kraft); border: 1px solid var(--ink);
  padding: clamp(.75rem, 2vw, 1.5rem);
  box-shadow: var(--shadow-art);
}
.product__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product__kind { font-size: var(--t-sm); font-style: italic; color: var(--ink-faint); }
.product__name { margin-top: .4rem; overflow-wrap: anywhere; }
.product__price {
  margin-top: .8rem; font-size: var(--t-lg); line-height: 1;
  color: var(--flare); font-variant-numeric: tabular-nums;
}
.product__blurb { margin-top: 1.5rem; max-width: 52ch; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.product__inc { margin-top: 1.25rem; }
.product__inc-label, .product__inc li { font-size: .88rem; line-height: 1.4; color: var(--ink-soft); }
.product__total { margin-top: .35rem; font-size: .8rem; font-style: italic; color: var(--ink-faint); }
.product__previews { margin-top: 1.5rem; max-width: 460px; }
.product__cart {
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1.75rem; padding: .9rem 2.6rem;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: var(--t-base); line-height: 1;
  transition: background .15s, color .15s, opacity .15s;
}
.product__cart:hover { background: transparent; color: var(--ink); }
/* already in the cart: the button becomes an outline */
.product__cart.is-in-cart { background: transparent; color: var(--ink); }
@media (max-width: 900px) { .product { grid-template-columns: 1fr; } }

/* --- cart ------------------------------------------------------ */
/* the site's own cart (localStorage); checkout hands every pack to payhip */
.nav__cart {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-left: 1.75rem; padding: .35rem 0;
  font-size: var(--t-base); border-bottom: 2px solid transparent;
}
.nav__cart:hover { border-bottom-color: var(--ink); }
.nav__count {
  display: inline-grid; place-items: center;
  min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--ink); color: var(--paper);
  font-size: .72rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.nav__count[hidden] { display: none; }

.cart {
  position: fixed; inset: 0 0 0 auto;
  width: min(420px, 100vw); height: 100vh; height: 100dvh;
  max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; border-left: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
}
.cart::backdrop { background: rgba(28, 24, 16, .45); }
.cart [hidden] { display: none !important; }
.cart__panel { display: flex; flex-direction: column; height: 100%; }
.cart__head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--rule);
}
.cart__title { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.cart__items { flex: 1 1 auto; overflow-y: auto; padding: 0 1.25rem; }
.cart__item {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) auto;
  grid-template-areas: "art meta price" "art meta remove";
  column-gap: .8rem; align-items: center;
  padding-block: .9rem; border-bottom: 1px solid var(--rule-soft);
}
.cart__art { grid-area: art; }
.cart__art img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--rule); }
.cart__meta { grid-area: meta; display: flex; flex-direction: column; min-width: 0; }
.cart__name { font-size: .95rem; }
.cart__name:hover { text-decoration: underline; }
.cart__kind { font-size: .72rem; font-style: italic; color: var(--ink-faint); }
.cart__price { grid-area: price; justify-self: end; font-size: .9rem; color: var(--flare); font-variant-numeric: tabular-nums; }
.cart__remove { grid-area: remove; justify-self: end; font-size: .72rem; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.cart__remove:hover { color: var(--ink); border-bottom-color: var(--ink); }
.cart__empty { flex: 1 1 auto; padding: 2rem 1.25rem; font-size: .9rem; color: var(--ink-soft); }
.cart__empty a { text-decoration: underline; }
.cart__foot { padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--rule); background: var(--kraft); }
.cart__total { display: flex; justify-content: space-between; font-size: 1rem; font-variant-numeric: tabular-nums; }
.cart__checkout {
  display: flex; justify-content: center; margin-top: .85rem; padding: .85rem 1rem;
  background: var(--ink); color: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 999px;
  font-size: var(--t-base); line-height: 1;
  transition: background .15s, color .15s;
}
.cart__checkout:hover { background: transparent; color: var(--ink); }
.cart__note { margin-top: .6rem; text-align: center; font-size: .72rem; font-style: italic; color: var(--ink-faint); }
body.cart-open { overflow: hidden; }
@media (max-width: 680px) { .nav__cart { margin-left: .75rem; } }

/* --- upsell popup --------------------------------------------- */
/* opens after "add to cart" when offers.js pairs that pack with another */
.offer {
  width: min(380px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  padding: 0; border: 1.5px solid var(--ink);
  background: var(--paper); color: var(--ink);
  box-shadow: var(--shadow-art); overflow: auto;
}
.offer::backdrop { background: rgba(28, 24, 16, .45); }
.offer__panel { position: relative; padding: 1.15rem 1.25rem 1.2rem; }
.offer__close {
  position: absolute; top: .45rem; right: .55rem;
  padding: .15rem .45rem; font-size: 1.5rem; line-height: 1; color: var(--ink-soft);
}
.offer__close:hover { color: var(--ink); }
.offer__added { font-size: .78rem; font-style: italic; color: var(--ink-faint); }
.offer__title {
  margin-top: .2rem; padding-right: 1.75rem;
  font-size: 1.35rem; font-weight: 700; line-height: 1.1; letter-spacing: -.02em;
}
.offer__art { margin-top: .9rem; background: var(--kraft); box-shadow: var(--shadow-art); }
.offer__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.offer__kind { margin-top: .75rem; font-size: .75rem; font-style: italic; color: var(--ink-faint); }
.offer__price { margin-top: .15rem; font-variant-numeric: tabular-nums; }
.offer__price strong { font-weight: 400; font-size: 1.2rem; color: var(--flare); }
.offer__price span { font-size: .8rem; font-style: italic; color: var(--ink-faint); }
.offer__inc { margin-top: .65rem; }
.offer__inc p { font-size: .75rem; color: var(--ink-soft); }
.offer__inc ul { display: flex; flex-wrap: wrap; gap: .45rem .7rem; margin-top: .35rem; }
.offer__inc li { display: flex; align-items: center; gap: .35rem; font-size: .75rem; color: var(--ink-soft); }
.offer__inc img { width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--rule); }
.offer__previews { margin-top: .8rem; }
.offer__actions { display: flex; align-items: center; gap: 1.1rem; margin-top: 1rem; }
.offer__actions .pill { padding: .7rem 1.6rem; font-size: var(--t-sm); }
.offer__no { font-size: .85rem; color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.offer__no:hover { color: var(--ink); border-bottom-color: var(--ink); }
@media (max-width: 680px) {
  /* a sheet from the bottom of the screen on phones */
  .offer {
    width: 100vw; max-width: 100vw; margin: auto 0 0;
    max-height: 92vh; max-height: 92dvh; border-width: 1.5px 0 0;
  }
  .offer__art { width: min(100%, 300px); }
}

/* --- customer DMs as a thin scrolling bar (home page) ----------- */
.dm-section .head { margin-bottom: 1.75rem; }
.dm-section .head h2 { flex: 0 1 auto; min-width: 0; }   /* the longest section title: let it wrap on phones */
.dm-bar { overflow: hidden; background: #000; color: var(--paper); }
.dm-bar__track {
  overflow: hidden; padding-block: clamp(2rem, 4.5vw, 3rem);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.dm-bar__mover { display: flex; width: max-content; animation: dm-bar var(--dm-bar-time, 90s) linear infinite; }
.dm-bar:hover .dm-bar__mover { animation-play-state: paused; }
@keyframes dm-bar { from { transform: translateX(-50%); } to { transform: translateX(0); } }
/* two DMs stacked per column, the columns run sideways */
.dm-bar .dms__list {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto);
  align-items: center; justify-content: start;
  gap: 1.35rem 2.25rem; max-width: none; margin: 0; padding-right: 2.25rem;
}
.dm-bar .dms__list > .dm:nth-child(n) { max-width: 330px; padding-top: 0; align-self: center; }   /* :nth-child(n) outranks the stacked-DM rules below */
.dm-bar .dms__list > .dm:nth-child(4n+2) { margin-left: 1.4rem; }   /* a slight stagger so the rows don't read as a table */
@media (max-width: 680px) {
  .dm-bar .dms__list { gap: 1.1rem 1.6rem; }
  .dm-bar .dms__list > .dm:nth-child(n) { max-width: 230px; }
}
@media (prefers-reduced-motion: reduce) { .dm-bar__track { overflow-x: auto; } }

/* --- customer DMs (home page testimonials) --------------------- */
/* real messages from listeners, rebuilt as text from crooh's screenshot.
   The section is the screenshot's own black, so the avatar crops (black
   corners) sit in it cleanly. It fades in from the kraft free-sampler band
   above with an eased curve, and its black runs straight into the footer. */
.dms {
  --dm-ground: #000;                    /* sampled from the original screenshot; same as the footer */
  --dm-fade: clamp(9rem, 22vw, 17rem);  /* long, eased fade so there's no visible edge */
  color: var(--paper);
  padding-block: calc(var(--stack) + var(--dm-fade) * .75) calc(var(--stack) * .6);
  background: var(--dm-ground);         /* fallback for browsers without color-mix */
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--dm-ground) 0.0%, var(--kraft)) 0px,
    color-mix(in oklab, var(--dm-ground) 2.0%, var(--kraft)) calc(var(--dm-fade) * 0.0833),
    color-mix(in oklab, var(--dm-ground) 7.4%, var(--kraft)) calc(var(--dm-fade) * 0.1667),
    color-mix(in oklab, var(--dm-ground) 15.6%, var(--kraft)) calc(var(--dm-fade) * 0.25),
    color-mix(in oklab, var(--dm-ground) 25.9%, var(--kraft)) calc(var(--dm-fade) * 0.3333),
    color-mix(in oklab, var(--dm-ground) 37.6%, var(--kraft)) calc(var(--dm-fade) * 0.4167),
    color-mix(in oklab, var(--dm-ground) 50.0%, var(--kraft)) calc(var(--dm-fade) * 0.5),
    color-mix(in oklab, var(--dm-ground) 62.4%, var(--kraft)) calc(var(--dm-fade) * 0.5833),
    color-mix(in oklab, var(--dm-ground) 74.1%, var(--kraft)) calc(var(--dm-fade) * 0.6667),
    color-mix(in oklab, var(--dm-ground) 84.4%, var(--kraft)) calc(var(--dm-fade) * 0.75),
    color-mix(in oklab, var(--dm-ground) 92.6%, var(--kraft)) calc(var(--dm-fade) * 0.8333),
    color-mix(in oklab, var(--dm-ground) 98.0%, var(--kraft)) calc(var(--dm-fade) * 0.9167),
    color-mix(in oklab, var(--dm-ground) 100.0%, var(--kraft)) calc(var(--dm-fade) * 1.0),
    var(--dm-ground) 100%);
}
.dms .head__rule { background: rgba(238, 233, 213, .25); }
.cap:has(+ .dms) { border-bottom: 0; } /* the fade is the seam; no line */
.dms__list {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
  gap: 1.1rem 1.8rem; max-width: 980px; margin-inline: auto;
}
.dm {
  display: flex; align-items: flex-end; gap: 6px; max-width: 260px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-transform: none;                 /* keep each message exactly as it was sent */
}
.dm:nth-child(3n+2) { padding-top: 1.8rem; }
.dm:nth-child(4n+1) { padding-top: .6rem; }
.dm__avatar { flex: none; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--dm-ground); }   /* below the 30px source, so high-res screens barely stretch them */
.dm:has(.dm__heart) .dm__avatar { margin-bottom: 11px; }   /* line up with the bubble, not the heart */
.dm__avatar--none { visibility: hidden; }
.dm__msgs { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.dm__bubble {
  background: #262626; color: #f2f2f2; border-radius: 16px;
  padding: 8px 11px; font-size: 12.5px; line-height: 1.3;
}
.dm__heart {
  display: grid; place-items: center; width: 18px; height: 18px; margin: -7px 0 0 5px;
  border-radius: 50%; background: #262626; border: 2px solid var(--dm-ground);
  font-size: 8.5px; line-height: 1;
}
@media (max-width: 680px) {
  .dms__list { flex-direction: column; align-items: stretch; gap: 1rem; }
  .dms__list .dm { max-width: 88%; padding-top: 0; }
  .dms__list .dm:nth-child(even) { align-self: flex-end; }
}

/* --- sales page (vox-academy/; content in tools/sales/<page>.json) ---
   Layout borrowed from long-form plugin pages, in the site's own colours:
   black sections, kraft bands, paper for the story, red for the accent line.
   Mobile first: the hero's title, cover, price and button fit the first
   phone screen. */
.sp-band { padding-block: clamp(3.5rem, 9vw, 7rem); }
.sp-band--ink { background: var(--ink); color: var(--paper); }
.sp-band--kraft { background: var(--kraft); }
.sp-band--paper { background: var(--paper); }

.sp-head { font-weight: 700; font-size: var(--t-lg); line-height: 1; letter-spacing: -.02em; }
.sp-head > span { display: block; }
.sp-head__accent { color: var(--flare); }

/* unfinished content: visible, never mistaken for the real thing */
.sp-todo {
  display: inline-block; padding: .35rem .6rem;
  border: 1.5px dashed var(--flare); color: var(--flare);
  font-size: var(--t-xs); font-style: italic; line-height: 1.3;
}

/* the add-to-cart button keeps its markup; on black it flips to cream */
.sp-hero .product__cart, .sp-cta .product__cart {
  margin-top: 0; background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.sp-hero .product__cart:hover, .sp-cta .product__cart:hover,
.sp-hero .product__cart.is-in-cart, .sp-cta .product__cart.is-in-cart { background: transparent; color: var(--paper); }

/* "learn more" buttons that scroll to the next section: solid, same size as add to cart.
   Cream on the black sections, black on the light ones; hovering turns them to an outline. */
.sp-next {
  display: flex; align-items: center; gap: .45rem; width: fit-content;
  margin: clamp(2.25rem, 5vw, 3.5rem) auto 0; padding: .9rem 2.6rem;
  border: 1.5px solid var(--ink); border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: var(--t-base); line-height: 1;
  transition: background .15s, color .15s;
}
.sp-next:hover { background: transparent; color: var(--ink); }
.sp-band--ink .sp-next, .sp-hero .sp-next, .sp-proof .sp-next { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.sp-band--ink .sp-next:hover, .sp-hero .sp-next:hover, .sp-proof .sp-next:hover { background: transparent; color: var(--paper); }
.sp-next span { transition: transform .2s; }
.sp-next:hover span { transform: translateY(2px); }
.sp-inside > .sp-next { grid-column: 1 / -1; }
.sp-hero .sp-next { margin-top: 1rem; }
@media (min-width: 900px) { .sp-hero__in > .sp-next { grid-area: next; margin: .8rem 0 0; } }
/* sections land below the sticky menu bar */
.sp [id] { scroll-margin-top: 4.5rem; }

/* hero */
.sp-hero { background: var(--ink); color: var(--paper); padding-block: 1.1rem 2.25rem; }
.sp-hero__in { display: grid; justify-items: center; text-align: center; gap: .55rem; }
.sp-hero__kind { font-size: var(--t-xs); font-style: italic; color: rgba(238, 233, 213, .62); }
.sp-hero__title {
  font-weight: 700; font-size: clamp(2.7rem, 13vw, 6.6rem);
  line-height: .9; letter-spacing: -.035em;
}
.sp-hero__title.is-upper { text-transform: uppercase; }
.sp-hero__promise { max-width: 30ch; font-size: var(--t-base); line-height: 1.3; color: rgba(238, 233, 213, .86); }
.sp-hero__art { width: min(58vw, 33vh, 270px); margin-top: .35rem; }
.sp-hero__art img, .sp-cta__art img, .sp-inside__art img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
/* a hairline beige frame wherever the cover sits on black (hero and closing section) */
.sp-hero__art img, .sp-cta__art img { outline: 1.5px solid var(--paper); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); }
.sp-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.1rem; margin-top: .45rem; }
.sp-price { font-size: 1.6rem; line-height: 1; color: var(--flare); font-variant-numeric: tabular-nums; }
.sp-price__was { margin-left: .45rem; font-size: 1rem; color: rgba(238, 233, 213, .5); }
.sp-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem .45rem; margin-top: .4rem; }
.sp-chips li {
  padding: .22rem .7rem; border: 1px solid rgba(238, 233, 213, .28); border-radius: 999px;
  font-size: var(--t-xs); color: rgba(238, 233, 213, .78);
}
@media (min-width: 900px) {
  .sp-hero { padding-block: clamp(3rem, 6vw, 5.5rem); }
  .sp-hero__in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-rows: 1fr repeat(6, auto) 1fr;
    grid-template-areas: "art ." "art kind" "art title" "art promise" "art buy" "art chips" "art next" "art .";
    justify-items: start; text-align: left; column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: .8rem;
  }
  .sp-hero__in > .sp-hero__kind { grid-area: kind; }
  .sp-hero__in > .sp-hero__title { grid-area: title; }
  .sp-hero__in > .sp-hero__promise { grid-area: promise; font-size: var(--t-md); }
  .sp-hero__in > .sp-hero__art { grid-area: art; width: min(100%, 520px); justify-self: end; margin: 0; }
  .sp-hero__in > .sp-buy { grid-area: buy; justify-content: flex-start; margin-top: .6rem; }
  .sp-hero__in > .sp-chips { grid-area: chips; justify-content: flex-start; }
}

/* hear it in action: the shared preview player (main.js), drawn larger */
.sp-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .4rem 2rem; margin-bottom: 2rem; }
.sp-players { display: grid; gap: .9rem; }
@media (min-width: 760px) { .sp-players { grid-template-columns: 1fr 1fr; gap: 1.1rem; } }
.sheet__preview.sp-player {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "label label vol" "bar bar bar" "play . time";
  gap: .7rem .8rem; padding: 1rem 1.1rem 1.05rem;
  background: var(--paper); border: 1px solid var(--rule);
}
.sp-player .sheet__preview-label { grid-area: label; font-size: var(--t-base); color: var(--ink); white-space: normal; }
.sp-player .sheet__vol { grid-area: vol; }
.sp-player .sheet__play {
  grid-area: play; width: 2.75rem; height: 2.75rem;
  background: var(--ink); border-color: var(--ink);
}
.sp-player .sheet__play::before { border-width: .45rem 0 .45rem .72rem; border-left-color: var(--paper); }
.sp-player.is-playing .sheet__play::before { width: .66rem; height: .85rem; border-width: 0 .2rem; border-color: var(--paper); }
.sp-player .sheet__play:not(:disabled):hover { background: var(--flare); border-color: var(--flare); }
.sp-player .sheet__preview-time { grid-area: time; font-size: .8rem; }
.sp-player .sheet__preview-bar { grid-area: bar; height: 42px; background: none; container-type: inline-size; }
.sp-player .sheet__preview-fill { top: 0; height: 100%; background: none; overflow: hidden; }
.sp-wave { display: block; width: 100%; height: 100%; fill: rgba(0, 0, 0, .2); }
.sp-player .sheet__preview-fill .sp-wave { width: 100cqw; fill: var(--flare); }
/* no waveform (built without afconvert): the plain progress line */
.sp-player .sheet__preview-bar:not(:has(svg)) { height: 2px; background: var(--rule); }
.sp-player .sheet__preview-bar:not(:has(svg)) .sheet__preview-fill { background: var(--ink); }
.sp-player--todo { display: grid; place-items: center; min-height: 9rem; border: 1px dashed var(--rule); }

/* what you can make: numbered steps */
.sp-steps { display: grid; gap: 2.75rem; margin-top: 2.25rem; list-style: none; padding: 0; }
@media (min-width: 760px) { .sp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; } }
.sp-media {
  display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden;
  background: #111; border: 1px solid rgba(238, 233, 213, .16);
}
.sp-media img, .sp-media video { width: 100%; height: 100%; object-fit: cover; }
.sp-step__title { margin-top: 1rem; font-size: var(--t-md); font-weight: 700; }
.sp-step__n { color: var(--flare); }
.sp-step__text { margin-top: .45rem; max-width: 40ch; font-size: var(--t-sm); line-height: 1.45; color: rgba(238, 233, 213, .74); }

/* learn how to sing yourself: media left, text right (stacked on phones) */
.sp-learn { display: grid; gap: 3rem; margin-top: 2.25rem; list-style: none; padding: 0; }
.sp-learn__row { display: grid; gap: 1.1rem; align-items: center; }
@media (min-width: 760px) {
  .sp-learn { gap: 3.5rem; }
  .sp-learn__row { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
  /* zigzag: every second row puts its media on the right, text on the left */
  .sp-learn__row:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .sp-learn__row:nth-child(even) > .sp-media { order: 2; }
  .sp-learn__row:nth-child(even) > .sp-learn__text { justify-self: end; }
}
.sp-media { position: relative; }
.sp-media--wide { aspect-ratio: 16 / 9; }
.sp-media--wide picture { display: contents; }
/* masterclass loops: sized to the clip (no bars), slightly rounded, no frame */
.sp-media--clip { aspect-ratio: 16 / 9; background: #0d0d0d; border: 0; border-radius: 10px; }
.sp-media--clip video { display: block; }
.sp-media--clip.sp-media--todo { border: 1px dashed rgba(238, 233, 213, .25); }
/* the guide pages sit straight on the section's black */
.sp-media--bare { background: none; border: 0; overflow: visible; }
.sp-media--bare img { object-fit: contain; }
.sp-learn__kind { font-size: var(--t-xs); font-style: italic; color: rgba(238, 233, 213, .55); }
.sp-learn__title { margin-top: .25rem; font-size: var(--t-lg); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.sp-learn__body { margin-top: .8rem; max-width: 46ch; font-size: var(--t-sm); line-height: 1.5; color: rgba(238, 233, 213, .78); }

/* what's inside */
.sp-inside { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 760px) { .sp-inside { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 6vw, 6rem); } }
.sp-inside__art { width: min(70vw, 440px); justify-self: center; box-shadow: var(--shadow-art); }
.sp-inside__list { margin-top: 1.6rem; border-top: 1px solid var(--rule); }
.sp-inside__list li {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem;
  padding: .8rem 0; border-bottom: 1px solid var(--rule);
}
.sp-inside__label { font-size: var(--t-md); }
.sp-inside__detail { font-size: var(--t-sm); font-style: italic; color: var(--ink-soft); }

/* proof: the homepage DM stack, unchanged */
.sp-proof .sp-head > span { display: inline; }
.sp-proof__img { display: block; width: 100%; height: auto; }

/* story */
.sp-story { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .sp-story { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; } }
.sp-story__text p { font-size: var(--t-md); line-height: 1.35; color: var(--ink-soft); }
.sp-story__text p + p { margin-top: .8rem; }

/* final call to action */
.sp-cta__in { display: grid; justify-items: center; text-align: center; gap: .6rem; }
.sp-cta__art { width: min(56vw, 280px); margin-bottom: 1rem; }
.sp-cta__title { font-weight: 700; font-size: var(--t-hero); line-height: .9; letter-spacing: -.035em; }
.sp-cta .note { margin-top: .6rem; color: rgba(238, 233, 213, .55); }

/* faq */
.sp-faq { display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .sp-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; } }
.sp-faq__list { border-top: 1px solid var(--rule); }
.sp-faq__item { border-bottom: 1px solid var(--rule); }
.sp-faq__item summary {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1rem 0; font-size: var(--t-md); cursor: pointer; list-style: none;
}
.sp-faq__item summary::-webkit-details-marker { display: none; }
.sp-faq__item summary::after { content: "+"; flex: none; color: var(--flare); }
.sp-faq__item[open] summary::after { content: "–"; }
.sp-faq__item > p, .sp-faq__item > .sp-todo { margin-bottom: 1.1rem; }
.sp-faq__item > p { max-width: 60ch; font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.sp-faq__item > p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* --- sales (a pack's `sale` in products.js) ----------------------
   The full price struck through beside the sale price, everywhere the pack
   shows. The october flash sale also turns terror tones' card black with
   inverted type and buttons and pumpkins round the edge. It all switches
   off by itself after the sale's last day. */
.price__was { margin-right: .15em; font-size: .82em; color: var(--ink-faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.price__now { color: var(--flare); }
.offer__price .price__now { font-size: inherit; font-style: normal; color: inherit; }
.offer__price .price__was { font-style: normal; }
.sale-tag {
  display: inline-block; margin-top: .6rem; padding: .3rem .65rem;
  background: var(--pumpkin); color: var(--ink);
  font-size: .78rem; line-height: 1; letter-spacing: .01em;
}
.sheet__tag--sale { background: var(--pumpkin); color: var(--ink); }
.sheet__sale-ends { margin-top: .35rem; text-align: right; font-size: .72rem; font-style: italic; color: var(--ink-faint); }

:root { --pumpkin: #F27A1A; }   /* jack-o'-lantern orange, only used by the flash sale */
.sheet--halloween {
  /* sized to its contents: the includes column on the left, the art column on the
     right, so the black hugs the pack instead of filling the whole slot */
  grid-template-columns: max-content minmax(0, 300px);
  width: max-content; max-width: 100%;
  justify-self: center; margin-inline: auto;
  padding: 1.7rem 1.15rem 1.45rem;
  background: radial-gradient(120% 90% at 50% 40%, #1d140c 0%, #0b0907 62%, #050403 100%);
  color: var(--paper);
  box-shadow: inset 0 0 0 1px rgba(242, 122, 26, .28);
}
.sheet--halloween .sheet__name { color: var(--paper); }
.sheet--halloween .sheet__kind,
.sheet--halloween .sheet__total,
.sheet--halloween .sheet__sale-ends { color: rgba(238, 233, 213, .6); }
.sheet--halloween .sheet__inc-label,
.sheet--halloween .sheet__inc span,
.sheet--halloween .sheet__blurb { color: rgba(238, 233, 213, .8); }
.sheet--halloween .sheet__art { box-shadow: 0 10px 22px rgba(0, 0, 0, .65); }
.sheet--halloween .price__was { color: rgba(238, 233, 213, .5); }
.sheet--halloween .price__now { color: var(--pumpkin); }
/* buttons, inverted */
.sheet--halloween .pill { border-color: var(--paper); color: var(--paper); }
.sheet--halloween .pill:hover { background: var(--paper); color: var(--ink); }
.sheet--halloween .pill--cart { background: var(--paper); color: var(--ink); }
.sheet--halloween .pill--cart:hover, .sheet--halloween .pill--cart.is-in-cart { background: transparent; color: var(--paper); }
/* preview players, inverted */
.sheet--halloween .sheet__preview { background: rgba(238, 233, 213, .06); border-color: rgba(238, 233, 213, .2); }
.sheet--halloween .sheet__play { border-color: var(--paper); }
.sheet--halloween .sheet__play::before { border-left-color: var(--paper); }
.sheet--halloween .sheet__preview.is-playing .sheet__play::before { border-color: var(--paper); }
.sheet--halloween .sheet__play:not(:disabled):hover { background: var(--paper); }
.sheet--halloween .sheet__play:not(:disabled):hover::before { border-left-color: var(--ink); }
.sheet--halloween .sheet__preview.is-playing .sheet__play:hover::before { border-color: var(--ink); }
.sheet--halloween .sheet__preview-label,
.sheet--halloween .sheet__preview-time,
.sheet--halloween .sheet__vol { color: rgba(238, 233, 213, .78); }
.sheet--halloween .sheet__preview-bar { background: rgba(238, 233, 213, .25); }
.sheet--halloween .sheet__volume { width: 2.6rem; }   /* a little extra room inside the padded card */
.sheet--halloween .sheet__preview-fill { background: var(--paper); }
.sheet--halloween .sheet__volume::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--paper) var(--vol, 80%), rgba(238, 233, 213, .25) var(--vol, 80%)); }
.sheet--halloween .sheet__volume::-webkit-slider-thumb { background: var(--paper); }
.sheet--halloween .sheet__volume::-moz-range-track { background: rgba(238, 233, 213, .25); }
.sheet--halloween .sheet__volume::-moz-range-progress { background: var(--paper); }
.sheet--halloween .sheet__volume::-moz-range-thumb { background: var(--paper); }
/* the pumpkins: decoration only, never in the way of a tap */
.sheet__pumpkins { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.sheet__pumpkins span {
  position: absolute; line-height: 1; text-transform: none;
  filter: drop-shadow(0 0 6px rgba(242, 122, 26, .45));
}
.sheet--halloween > :not(.sheet__pumpkins) { position: relative; z-index: 2; }
.sheet--halloween .sheet__art { position: relative; }
/* the home rail scrolls sideways and clips anything outside it, so leave the pumpkins room,
   and widen this one rail slot by the card's padding + margin so its content keeps the
   same width as every other card (otherwise the preview boxes run off the right edge) */
.rail .sheet--halloween { margin: 20px auto 6px; }
.rail__item:has(.sheet--halloween) { flex-basis: calc(clamp(290px, 42vw, 500px) + 2 * (18px + 1.15rem)); }


/* the flash-sale bar on the home page, between the hero and the featured pack */
.sale-bar[hidden] { display: none; }
.sale-bar {
  display: block; background: #0b0907; color: var(--paper);
  border-block: 1px solid rgba(242, 122, 26, .45);
  transition: background .15s;
}
.sale-bar:hover { background: #1a120b; }
.sale-bar__in {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; padding: 1rem var(--gut);
  font-size: var(--t-sm); line-height: 1.25;
}
.sale-bar__art {
  flex: none; width: 64px; height: 64px; object-fit: cover;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(238, 233, 213, .18);
}
.sale-bar__text { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .9rem; }
.sale-bar__label { padding: .22rem .6rem; background: var(--pumpkin); color: var(--ink); font-size: .8rem; line-height: 1; }
.sale-bar__name { font-weight: 700; font-size: var(--t-base); }
.sale-bar__price { font-variant-numeric: tabular-nums; font-size: var(--t-base); }
.sale-bar .price__was { color: rgba(238, 233, 213, .5); }
.sale-bar .price__now { color: var(--pumpkin); }
.sale-bar__ends { font-style: italic; color: rgba(238, 233, 213, .65); }
.sale-bar__go { border-bottom: 1px solid rgba(238, 233, 213, .5); }
.sale-bar:hover .sale-bar__go { border-bottom-color: var(--paper); }
.sale-bar__pumpkin { font-size: 1.3rem; line-height: 1; }
@media (max-width: 680px) {
  .sale-bar__in { justify-content: flex-start; gap: .85rem; padding-block: .85rem; }
  .sale-bar__art { width: 56px; height: 56px; }
  .sale-bar__text { gap: .25rem .6rem; }
  .sale-bar__pumpkin, .sale-bar__go { display: none; }
}

/* the upsell popup when it's offering the flash-sale pack */
.offer.is-halloween { background: #0b0907; color: var(--paper); border-color: var(--pumpkin); }
.offer.is-halloween .offer__close,
.offer.is-halloween .offer__added,
.offer.is-halloween .offer__kind,
.offer.is-halloween .offer__inc p,
.offer.is-halloween .offer__inc li,
.offer.is-halloween .offer__no { color: rgba(238, 233, 213, .72); }
.offer.is-halloween .offer__close:hover, .offer.is-halloween .offer__no:hover { color: var(--paper); }
.offer.is-halloween .offer__no { border-bottom-color: rgba(238, 233, 213, .35); }
.offer.is-halloween .offer__art { box-shadow: 0 10px 22px rgba(0, 0, 0, .65); }
.offer.is-halloween .offer__price strong { color: var(--pumpkin); }
.offer.is-halloween .price__was { color: rgba(238, 233, 213, .5); }
.offer.is-halloween .pill--cart { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.offer.is-halloween .pill--cart:hover { background: transparent; color: var(--paper); }
.offer.is-halloween .sheet__preview { background: rgba(238, 233, 213, .06); border-color: rgba(238, 233, 213, .2); }
.offer.is-halloween .sheet__play { border-color: var(--paper); }
.offer.is-halloween .sheet__play::before { border-left-color: var(--paper); }
.offer.is-halloween .sheet__preview.is-playing .sheet__play::before { border-color: var(--paper); }
.offer.is-halloween .sheet__preview-label, .offer.is-halloween .sheet__preview-time, .offer.is-halloween .sheet__vol { color: rgba(238, 233, 213, .78); }
.offer.is-halloween .sheet__preview-bar { background: rgba(238, 233, 213, .25); }
.offer.is-halloween .sheet__preview-fill { background: var(--paper); }

/* --- responsive ----------------------------------------------- */
@media (max-width: 900px) {
  .feat__in, .split, .foot__in { grid-template-columns: 1fr; }
  .foot__in { gap: 2rem; }
  .cat { grid-template-columns: 1fr auto; row-gap: .75rem; }
  .cat__peek { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .nav__links {
    position: fixed; inset: 74px 0 auto 0;
    background: var(--paper); border-bottom: 1px solid var(--rule);
    flex-direction: column; gap: 0; padding: .5rem var(--gut) 1.25rem;
    font-size: var(--t-md);
  }
  .nav__links[hidden] { display: none; }
  .nav__links a { padding: .7rem 0; border-bottom: 1px solid var(--rule-soft); }
  .nav__toggle { display: block; margin-left: auto; font-weight: 700; border: 2px solid var(--ink); padding: .3rem .8rem; }
  .hero { min-height: 78vh; }
  .obj { width: calc(var(--w) * .6); }
  .obj--extra { display: none; }
  .grid { grid-template-columns: 1fr; }
  /* long names + collab credits wrap badly in the narrow art column */
  .sheet__head { grid-column: 1 / -1; }
  .sheet__foot { grid-column: 1 / -1; }
}

/* --- motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero__field .obj img { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@media print { .nav, .hero__field, .cap { display: none; } }